如何通過Javascript動態地放置圖像元素

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Form_Valid_JS</title> 
</head> 

<body> 
<form name="form" id="form"> 
<label style="font-size:18px"><strong> Name</strong> </label><br><br><div id="error"> </div> 
<input type="text" id="fname" name="fname" placeholder="First Name" pattern="[a-zA-Z\s]{0,10}" onBlur="fvalidity()" onFocus="Focus()">; 
<input type="text" id="lname" name="lname" placeholder="Last Name" pattern="[a-zA-Z\s]{0,10}" onBlur="lvalidity()"> 
<input type="submit"> 
</form> 


</body> 
</html> 
<script> 
function fvalidity() 
{ 
    var txt=""; 
    if(document.getElementById("fname").validity.patternMismatch) 
    { 
     txt="*Only Alphabet max 10 Characters."; 
    } 
    if(document.getElementById("fname").value=="") 
    { 
     txt="Field is Empty!!"; 
    } 
    if(txt!="") 
    { 
     img(); 
     var s=document.getElementById("error"); 
     s.innerHTML=txt; 
     s.style.visibility="visible"; 
    } 
} 
function img() 
{ 
    var sample=document.createElement("img"); 
    var t= document.createAttribute("src"); 
    t.value="../cross_script.png"; 
    sample.setAttributeNode(t); 
    var id=document.createAttribute("id"); 
    id.value="img"; 
    sample.setAttributeNode(id); 
    document.getElementById("form").appendChild(sample); 

} 
</script>

我想在每個輸入字段之後動態顯示圖像以顯示刻度或交叉符號。但是當我這樣做時，它將圖像放在提交按鈕後的最後一步是什麼是在每個輸入字段之後動態地放置圖像的正確過程。我的意思是我做了一個函數，稍後我會在進行驗證時調用它。不。動態地製作元素和標籤，並在其上應用Cs並在每個輸入字段後顯示在頁面上。如何通過Javascript動態地放置圖像元素

來源

2015-09-04 Saad Saadi

在需要傳遞的參考在此之後被插入像

function img(target) { 
    var sample = document.createElement("img"); 
    sample.src = "../cross_script.png"; 
    document.getElementById("form").appendChild(sample); 
    if (target.nextSibling) { 
     target.parentNode.insertBefore(sample, target.nextSibling) 
    } else { 
     target.parentNode.appendChild(sample) 
    } 
}

然後

img(document.getElementById("fname"));

來源

2015-09-04 06:49:20

http://jsfiddle.net/arunpjohny/gnae5aLj圖像輸入字段這種情況下/ –

感謝兄弟.....其工作...非常感謝。 –

我們可以動態創建一個問題...我將id分配給輸入標籤的，以後我可以在Focus事件中刪除它。但它刪除所有因爲它分配相同的ID到所有 ..我想刪除焦點輸入圖像。 –

如何通過Javascript動態地放置圖像元素

回答

相關問題