Este artículo describe el método de crear y eliminar dinámicamente elementos en JavaScript. Compártelo para su referencia. El análisis específico es el siguiente:
En DOM, podemos eliminar de manera fácil y rápida los elementos DOM dinámicamente. Aquí le daremos una breve introducción.
Ejemplo 1:
Crear un botón dinámicamente
Copie el código de la siguiente manera: <html>
<Evista>
<title> Botón de creación dinámica </title>
<script language = "javaScript">
var a, b, ab, ba, c;
función createInpeta () {
a = document.createElement ("entrada"); // usa el método de creación de elementos de DOM
a.type = "botón"; // Establecer el tipo de elemento
A.Value = "Botón A"; // Establecer el valor del elemento
a.attachevent ("onclick", addInputB); // Agregar eventos para el control
document.body.appendChild (a); // Agregar control a la forma
// a = nulo; // libera el objeto
}
Ejemplo 2:
Copie el código de la siguiente manera: <html>
<Evista>
<script type = "text/javaScript">
función test () {
// createElement () cree un elemento que especifica el nombre de la etiqueta [como: crear dinámicamente un hipervínculo]
var createa = document.createElement ("A");
create.id = "a1";
createa.inntext = "Conectar a Baidu";
createa.href = "// www.vevb.com";
//createa.color="green "//// Agregar color (no olvide el atributo de estilo, de lo contrario no habrá efecto)
createa.style.color = "verde"
// Agregar ubicación predeterminada - -Body y agregar nodos infantiles
//document.body.appendchild(createa);
// Coloque la ubicación especificada
document.getElementById ("Div1"). AppendChild (createa);
}
función test2 () {
// Eliminar el nodo a removeChild () en la ubicación especificada
document.getElementById ("Div1"). RemoVeChild (document.getElementById ("A1")); // Nombre de identificación Duplicado JS para tomar solo el primero
}
</script>
</ablo>
<Body>
<!-Creación de elementos dinámicos->
<input type = "button" value = "create una etiqueta" onClick = "test ()"/> <br/>
<input type = "button" value = "eliminar para crear una etiqueta" onClick = "test2 ()"/>
<div id = "div1">
</div>
</body>
</html>
Crear dinámicamente múltiples formas:
Copie el código de la siguiente manera: <html>
<Evista>
<script type = "text/javaScript">
window.onload = function () {
var abtn = document.createElement ("entrada");
var bbtn = document.createElement ("entrada");
var cbtn = document.createElement ("entrada");
abtn.type = "botón";
abtn.value = "botón A";
abtn.onclick = copybtn;
bbtn.type = "botón";
bbtn.value = "botón B";
bbtn.onclick = copybtn;
cbtn.type = "botón";
cbtn.value = "botón C";
CBTN.Onclick = ClearCopyBtn;
document.body.appendChild (ABTN);
document.body.appendChild (BBTN);
document.body.appendChild (CBTN);
};
función copybtn () {
var btn = document.createElement ("entrada");
btn.type = "botón";
btn.value = this.Value;
btn.iscopy = true;
btn.onclick = copybtn;
document.body.appendChild (BTN);
}
función ClearCopyBtn () {
var btns = document.getElementsBytagName ("entrada");
longitud var = btns.length;
para (var i = longitud-1; i> = 0; i--) {
if (btns [i] .iscopy) {
document.body.removechild (BTNS [i]);
}
}
}
</script>
</ablo>
<Body>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.