Este artigo descreve o método de criação e exclusão dinamicamente de elementos no JavaScript. Compartilhe para sua referência. A análise específica é a seguinte:
No DOM, podemos excluir com facilidade e rapidez elementos DOM dinamicamente. Aqui, daremos a você uma breve introdução.
Exemplo 1:
Crie um botão dinamicamente
Copie o código da seguinte forma: <html>
<head>
<title> Botão Criar Dynamic </ititure>
<Script Language = "JavaScript">
var a, b, ab, ba, c;
função createInputA () {
a = document.createElement ("entrada"); // Use o método de criação de elementos do DOM
A.Type = "Button"; // Defina o tipo de elemento
a.Value = "Button A"; // Defina o valor do elemento
a.Attachevent ("OnClick", addinputB); // Adicionar eventos para o controle
document.body.appendChild (a); // Adicione o controle para formar
// a = null; // Libere o objeto
}
Exemplo 2:
Copie o código da seguinte forma: <html>
<head>
<script type = "text/javascript">
function test () {
// createElement () Crie um elemento que especifica o nome da etiqueta [como: Crie dinamicamente um hiperlink]
var createa = document.createElement ("a");
createa.id = "A1";
createa.innerText = "Connect to Baidu";
createa.href = "// www.vevb.com";
//createa.color="green "/// Adicione cor (não esqueça o atributo de estilo, caso contrário, não haverá efeito)
createa.style.color = "verde"
// Adicionar localização padrão -Corpo e adicione nós filhos
//document.body.appendchild(createa);
// Coloque o local especificado
document.getElementById ("div1"). ApndendChild (createa);
}
função test2 () {
// exclua o nó para removeChild () no local especificado
document.getElementById ("div1"). RemoveChild (document.getElementById ("A1")); // Digno de identificação duplicado JS para levar apenas o primeiro
}
</script>
</head>
<Body>
<!-Criação de elementos dinâmicos->
<input type = "button" value = "crie uma tag" onclick = "test ()"/> <br/>
<input type = "button" value = "exclua para criar uma tag" onclick = "test2 ()"/>
<div id = "div1">
</div>
</body>
</html>
Crie dinamicamente vários formulários:
Copie o código da seguinte forma: <html>
<head>
<script type = "text/javascript">
window.onload = function () {
var abtn = document.createElement ("input");
var bbtn = document.createElement ("input");
var cbtn = document.createElement ("input");
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);
};
função copybtn () {
var btn = document.createElement ("input");
btn.type = "Button";
btn.value = this.value;
btn.iscopy = true;
btn.OnClick = copybtn;
document.body.appendChild (btn);
}
função clearcopybtn () {
var Btns = document.getElementsByTagName ("input");
var comprimento = btns.length;
for (var i = comprimento-1; i> = 0; i--) {
if (btns [i] .iscopy) {
document.body.removeChild (BTNS [i]);
}
}
}
</script>
</head>
<Body>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.