Heim  >  Artikel  >  Web-Frontend  >  Zusammenfassung der js-Implementierung zum Erstellen und Löschen von HTML-Elementen_Javascript-Fähigkeiten

Zusammenfassung der js-Implementierung zum Erstellen und Löschen von HTML-Elementen_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:37:391280Durchsuche

Wenn ich ein div-Element erstellen möchte.

1. Mit DOM-Objekt erstellen:

Erstellen Sie Elemente mit der Methode document.createElement('div').

2. Erstellen Sie mit JQuery:

Erstellen Sie Elemente direkt mit der Methode $('dc6dce4a544fdca2df29d5ac0ea9906bNeues Element erstellt über JQuery16b28748ea4df4d9c2150843fecfba68').

Wenn Sie das div-Element mit der ID „div2js“ löschen müssen.

1. DOM-Objekte verwenden

Zuerst müssen Sie das übergeordnete Element des gelöschten Elements finden und die zu löschenden untergeordneten Elemente über das übergeordnete Element löschen.

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

2. Verwenden Sie JQuery

Direkt suchen und löschen.

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

Schauen wir uns zum Schluss noch ein Beispiel an

<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>";  

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn