В этой статье описывается метод динамического создания и удаления элементов в JavaScript. Поделитесь этим для вашей ссылки. Конкретный анализ заключается в следующем:
В DOM мы можем легко и быстро удалить элементы DOM динамически. Здесь мы дадим вам краткое представление.
Пример 1:
Динамически создать кнопку
Скопируйте код следующим образом: <html>
<голова>
<Title> Dynamic Create Button </title>
<script language = "javascript">
var a, b, ab, ba, c;
функция createInputa () {
a = document.createElement ("input"); // Использование метода создания элемента DOM
a.type = "кнопка"; // Установить тип элемента
A.Value = "Кнопка A"; // Установить значение элемента
A.attachevent ("onclick", addinputb); // Добавить события для управления
document.body.appendchild (a); // Добавить контроль в форму
// a = null; // Выпустить объект
}
Пример 2:
Скопируйте код следующим образом: <html>
<голова>
<script type = "text/javascript">
функциональный тест () {
// createElement () Создайте элемент, который указывает имя метки [например: динамически создавать гиперссылку]
var createa = document.createElement ("a");
createa.id = "a1";
createa.innertext = "Подключиться к Baidu";
createa.href = "// www.vevb.com";
//createa.color="green "//// Добавить цвет (не забудьте атрибут стиля, в противном случае эффект не будет)
createa.style.color = "green"
// Добавить местоположение по умолчанию -тела и добавить дочерние узлы
//document.body.appendchild(createa);
// Поместите указанное место
document.getElementbyId ("div1"). AppendChild (Createa);
}
Function test2 () {
// Удалить узел в removeChild () в указанном месте
document.getElementbyId ("div1"). RemoveChild (document.getElementById ("a1")); // идентификационное имя дубликат JS только первым
}
</script>
</head>
<тело>
<!-создание динамического элемента->
<input type = "button" value = "Создать тег" onclick = "test ()"/> <br/>
<input type = "button" value = "удалить для создания тега" onclick = "test2 ()"/>
<div id = "div1">
</div>
</body>
</html>
Динамически создавать несколько форм:
Скопируйте код следующим образом: <html>
<голова>
<script type = "text/javascript">
window.onload = function () {
var abtn = document.createElement ("input");
var bbtn = document.createElement ("input");
var cbtn = document.createElement ("input");
abtn.type = "кнопка";
abtn.value = "Кнопка A";
abtn.onclick = copybtn;
bbtn.type = "кнопка";
bbtn.value = "кнопка B";
bbtn.onclick = copyBtn;
cbtn.type = "кнопка";
cbtn.value = "Кнопка C";
cbtn.onclick = clearCopyBtn;
document.body.appendchild (abtn);
document.body.appendchild (bbtn);
document.body.appendchild (cbtn);
};
функция copyBtn () {
var btn = document.createElement ("input");
btn.type = "кнопка";
btn.value = this.value;
btn.iscopy = true;
btn.onclick = copyBtn;
document.body.appendchild (btn);
}
function clearcopybtn () {
var btns = document.getElementsbytagname ("input");
var length = btns.length;
for (var i = длина-1; i> = 0; i--) {
if (btns [i] .iscopy) {
document.body.removechild (btns [i]);
}
}
}
</script>
</head>
<тело>
</body>
</html>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.