HTML要素の作成と削除のjs実装まとめ_javascriptスキル-jsチュートリアル-php.cn

HTML要素の作成と削除のjs実装まとめ_javascriptスキル

WBOY

リリース： 2016-05-16 15:37:39

オリジナル

1342 人が閲覧しました

div 要素を作成したい場合。

1. DOM オブジェクトを使用して作成します:

document.createElement('div') メソッドを使用して要素を作成します。

2. JQuery を使用して以下を作成します:

$('

JQuery

') メソッドを使用して要素を直接作成します。

ID が「div2js」の div 要素を削除する必要がある場合。

1. DOM オブジェクトを使用する

まず、削除された要素の親要素を見つけて、親要素を通じて削除する必要がある子要素を削除する必要があります。

var el = document.getElementById('div2js');
 el.parentNode.removeChild(el);

ログイン後にコピー

2. JQuery を使用する

直接検索して削除します。

$('#div2js').remove();

最後に例を見てみましょう

<script type="text/javascript" language="Javascript"> 
function InputOnBlur() 
{    var name=document.getElementById("name").value; 

     if(name.length >10 || name.length<2) 
       { 
        var element=document.getElementById("message"); 
      if(element) 
      { 
      //alert(element.parentNode.innerHTML); 
      element.parentNode.removeChild(element); 
      } 
               var MySpan=document.createElement("span"); 
               document.getElementById("containers").appendChild(MySpan); 
               MySpan.id = "message"; 
               MySpan.innerHTML = "<img src='false.jpg' alt='请输入正确的姓名'/>请输入正确的姓名"; 
        } 
        
     else{ 
      var element=document.getElementById("message"); 
      if(element) 
      { 
      //alert(element.innerHTML); 
      element.parentNode.removeChild(element); 
      } 
               var MySpan=document.createElement("span"); 
               document.getElementById("containers").appendChild(MySpan); 
               MySpan.id = "message"; 
               MySpan.innerHTML = "<img src='true.gif' alt='该用户名输入正确'/>该用户名输入正确"; 
          } 
} 
</script>
<div>  
姓名：<input id="name" type="text" onblur="InputOnBlur()" /><span id="containers"></span></div>  
<script language="javascript">  
document.getElementById("containers").innerHTML = "<font color=red>请输入姓名</font>";

ログイン後にコピー