Cet article décrit la méthode de création et de supprimer dynamiquement des éléments en JavaScript. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
Dans DOM, nous pouvons supprimer facilement et rapidement les éléments DOM dynamiquement. Ici, nous vous donnerons une brève introduction.
Exemple 1:
Créer un bouton dynamiquement
Copiez le code comme suit: <html>
<adal>
<Title> Bouton de création dynamique </TITME>
<script linguisse = "javascript">
var a, b, ab, ba, c;
fonction createInputa () {
a = document.CreateElement ("entrée"); // utilise la méthode de création des éléments du DOM
A.Type = "Button"; // définir le type d'élément
a.value = "bouton A"; // Définit la valeur de l'élément
A.Attachevent ("onclick", addInputB); // ajouter des événements pour le contrôle
document.body.ApendChild (a); // Ajouter un contrôle au formulaire
// a = null; // libérer l'objet
}
Exemple 2:
Copiez le code comme suit: <html>
<adal>
<script type = "text / javascript">
fonction test () {
// createElement () Créer un élément qui spécifie le nom d'étiquette [tel que: Créer dynamiquement un hyperlien]
var createa = document.CreateElement ("a");
createa.id = "a1";
createa.innertext = "connecter à baidu";
createa.href = "// www.vevb.com";
//createa.color="Green "//// ajouter de la couleur (n'oubliez pas l'attribut de style, sinon il n'y aura pas d'effet)
createa.style.color = "green"
// Ajouter l'emplacement par défaut - corps et ajouter des nœuds enfants
//Document.body.ApendChild(Createa);
// Placez l'emplacement spécifié
document.getElementById ("Div1"). APPENDCHILD (CREATEA);
}
fonction test2 () {
// Supprimer le nœud pour rerovechild () à l'emplacement spécifié
document.getElementById ("div1"). removechild (document.getElementById ("a1")); // ID Nom Duplicate JS pour ne prendre que le premier
}
</cript>
</ head>
<body>
<! - Création dynamique des éléments ->
<input type = "bouton" value = "Créer une balise" onClick = "test ()" /> <br/>
<input type = "Button" value = "supprimer pour créer une balise" onClick = "test2 ()" />
<div id = "div1">
</div>
</docy>
</html>
Créez dynamiquement plusieurs formulaires:
Copiez le code comme suit: <html>
<adal>
<script type = "text / javascript">
window.onload = function () {
var abtn = document.CreateElement ("entrée");
var bbtn = document.CreateElement ("entrée");
var cbtn = document.CreateElement ("entrée");
abtn.type = "bouton";
abtn.value = "bouton A";
abtn.onclick = copyBtn;
bbtn.type = "bouton";
bbtn.value = "Button B";
bbtn.onclick = copyBtn;
cbtn.type = "bouton";
cbtn.value = "Button C";
CBTN.OnClick = ClearCopyBtn;
Document.Body.ApendChild (ABTN);
Document.Body.ApendChild (BBTN);
Document.Body.ApendChild (CBTN);
};
fonction copybtn () {
var btn = document.CreateElement ("entrée");
btn.type = "bouton";
btn.value = this.value;
btn.iscopy = true;
btn.onclick = copyBtn;
Document.Body.ApendChild (BTN);
}
fonction clearCopyBtn () {
var btns = document.getElementsByTagName ("entrée");
var longueur = btns.length;
pour (var i = longueur - 1; i> = 0; i--) {
if (btns [i] .iscopy) {
document.body.removechild (btns [i]);
}
}
}
</cript>
</ head>
<body>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.