Ausführliche Erläuterung der Anwendungsbeispiele für das Ein-/Ausblenden und Erstellen/Löschen von HTML-Elementen in Javascript

Anzeigen/Ausblenden

1. Schreiben Sie die js-Funktion

<script type="text/javascript"> 
function display(y){$(y).style.display=($(y).style.display=="none")?"":"none";} 
function $(s){return document.getElementById(s);} 
</script>

2. Fügen Sie das ID-Attribut zum anzuzeigenden/auszublendenden HTML-Element hinzu

<table> 
<tr id="menu" > 
<td>控制这个tr的显示/隐藏</td> 
</tr> 
</table>

3 . um die js-Funktion auszulösen

<input type="button" onclick="display(&#39;menu&#39;)" value="显示/隐藏"/> 
<a href="#" onclick="display(&#39;menu&#39;)" >显示/隐藏</a> 
javascript显示隐藏层<div id="layer" style="display:none;">广告</div> 
<input type="botton" onclick="display(layer)">

2: Zwei Methoden für JavaScript zum Steuern des Ausblendens und Anzeigens von Seitensteuerelementen
Zwei Methoden für JavaScript zum Steuern des Ausblendens und Anzeigens von Seitensteuerelementen. Der Unterschied zwischen den Methoden besteht darin, ob das Steuerelement noch vorhanden ist, nachdem es ausgeblendet wurde.
Methode 1:

document.all["PanelSMS"].style.visibility="hidden"; 
document.all["PanelSMS"].style.visibility="visible";

Methode 2:

document.all["PanelSMS"].style.display="none"; 
document.all["PanelSMS"].style.display="inline";

Nach dem Ausblenden ist die Position der Seite immer noch vom Steuerelement belegt, aber nicht vom Steuerelement. Anzeigen
Die Position der Seite ist nach dem Ausblenden in Methode 2 nicht belegt

Erstellen/Löschen

Wenn ich ein div-Element erstellen möchte.

1. Erstellen mit DOM-Objekten:

Verwenden Sie die Methode document.createElement('div'), um Elemente zu erstellen.

2. Verwenden Sie JQuery zum Erstellen:

Verwenden Sie die Methode $('dc6dce4a544fdca2df29d5ac0ea9906bNeues von JQuery erstelltes Element16b28748ea4df4d9c2150843fecfba68') zum direkten Erstellen des Elements.

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

1. Verwenden Sie das DOM-Objekt

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

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

2. Verwenden Sie JQuery

, um es direkt zu finden und zu 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=&#39;false.jpg&#39; alt=&#39;请输入正确的姓名&#39;/>请输入正确的姓名";
        }
         
     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=&#39;true.gif&#39; alt=&#39;该用户名输入正确&#39;/>该用户名输入正确";
          }
}
</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>";

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Anwendungsbeispiele für das Ein-/Ausblenden und Erstellen/Löschen von HTML-Elementen in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!