Dieser Artikel beschreibt die Methode, Elemente in JavaScript dynamisch zu erstellen und zu löschen. Teilen Sie es für Ihre Referenz. Die spezifische Analyse ist wie folgt:
In DOM können wir DOM -Elemente einfach und schnell dynamisch löschen. Hier geben wir Ihnen eine kurze Einführung.
Beispiel 1:
Erstellen Sie dynamisch eine Schaltfläche
Kopieren Sie den Code wie folgt: <html>
<kopf>
<title> Button erstellen </title>
<script Language = "JavaScript">
var a, b, ab, ba, c;
Funktion createInputa () {
a = document.createelement ("Eingabe"); // Verwenden Sie die DOM -Elementerstellungsmethode
A.Type = "Button"; // Setzen Sie die Art des Elements
A.Value = "Button a"; // Setzen Sie den Wert des Elements
A.attachevent ("Onclick", addInputB); // Ereignisse für die Kontrolle hinzufügen
document.body.appendchild (a); // Fügen Sie die Kontrolle hinzu, um zu bilden
// a = null; // das Objekt loslassen
}
Beispiel 2:
Kopieren Sie den Code wie folgt: <html>
<kopf>
<script type = "text/javaScript">
Funktionstest () {
// createLement () ein Element erstellen, das den Labelnamen angibt [wie: dynamisch einen Hyperlink erstellen]
var createa = document.createelement ("a");
createa.id = "a1";
Createa.Innertext = "Connect to Baidu";
createa.href = "// www.vevb.com";
//createa.color="green "//// Farbe hinzufügen (vergessen Sie nicht das Style -Attribut, sonst wird es keinen Effekt geben)
Createa.Style.color = "Green"
// Standardsposition hinzufügen -Körper und Kinderknoten hinzufügen
//document.body.appendchild(createa);
// Platzieren Sie den angegebenen Ort
document.getElementById ("div1"). appendChild (createa);
}
Funktion test2 () {
// Löschen Sie den Knoten an removechild () am angegebenen Ort
document.getElementById ("div1"). removeChild (document.getElementById ("a1")); // ID -Name doppelte JS, um nur den ersten zu nehmen
}
</script>
</head>
<body>
<!-Dynamische Elementerstellung->
<input type = "button" value = "ein Tag" onclick = "test ()"/> <br/> erstellen
<Eingabe type = "button" value = "Löschen, um ein Tag" onclick = "test2 ()"/> zu erstellen
<div id = "div1">
</div>
</body>
</html>
Erstellen Sie dynamisch mehrere Formen:
Kopieren Sie den Code wie folgt: <html>
<kopf>
<script type = "text/javaScript">
window.onload = function () {
var abtn = document.createelement ("Eingabe");
var bbtn = document.createelement ("Eingabe");
var cBTN = document.createelement ("Eingabe");
Abtn.Type = "Button";
abtn.value = "button a";
abtn.onclick = CopyBtn;
BBTN.Type = "Button";
BBTN.Value = "Button B";
BBTN.Onclick = CopyBtn;
CBTN.Type = "Button";
CBTN.Value = "Button C";
CBTN.Onclick = ClearCopyBtn;
document.body.appendchild (ABTN);
document.body.Appendchild (BBTN);
document.body.Appendchild (CBTN);
};
Funktion CopyBtn () {
var btn = document.createelement ("Eingabe");
btn.type = "button";
btn.value = this.value;
btn.iscopy = true;
btn.onclick = CopyBtn;
document.body.appendchild (btn);
}
Funktion clearCopyBtn () {
var btns = document.getElementsByTagName ("input");
var länge = btns.length;
für (var i = Länge-1; i> = 0; i--) {
if (btns [i] .iscopy) {
document.body.removechild (btns [i]);
}
}
}
</script>
</head>
<body>
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.