تصف هذه المقالة طريقة إنشاء وحذف العناصر ديناميكيًا في JavaScript. شاركه للرجوع إليه. التحليل المحدد هو كما يلي:
في DOM ، يمكننا بسهولة وسرعة حذف عناصر DOM بشكل ديناميكي. هنا سوف نقدم لك مقدمة موجزة.
مثال 1:
قم بإنشاء زر ديناميكيًا
انسخ الرمز كما يلي: <html>
<head>
<title> زر إنشاء ديناميكي </title>
<script language = "javaScript">
var a ، b ، ab ، ba ، c ؛
وظيفة createInputa () {
a = document.createElement ("المدخلات") ؛ // استخدم طريقة إنشاء عنصر DOM
A.Type = "Button" ؛ // اضبط نوع العنصر
A.Value = "Button A" ؛ // اضبط قيمة العنصر
A.attachevent ("onclick" ، addinputb) ؛ // إضافة أحداث للتحكم
document.body.appendchild (a) ؛ // إضافة التحكم إلى النموذج
// a = null ؛ // حرر الكائن
}
مثال 2:
انسخ الرمز كما يلي: <html>
<head>
<script type = "text/javaScript">
اختبار الوظيفة () {
// CreateElement () قم بإنشاء عنصر يحدد اسم التسمية [مثل: إنشاء ارتباط تشعبي ديناميكيًا] بشكل ديناميكي]
var createa = document.createElement ("a") ؛
createa.id = "a1" ؛
createa.innertext = "connect to baidu" ؛
createa.href = "// www.vevb.com" ؛
//createa.color="green "//// إضافة اللون (لا تنسى سمة النمط ، وإلا فلن يكون هناك تأثير)
createa.style.color = "الأخضر"
// إضافة الموقع الافتراضي -الجسم وأضف العقد الفرعية
//document.body.appendchild(createa) ؛
// ضع الموقع المحدد
document.getElementById ("div1"). AppendChild (Createa) ؛
}
وظيفة test2 () {
// حذف العقدة إلى إزالة () في الموقع المحدد
document.getElementById ("div1"). removechild (document.getElementById ("A1")) ؛ // معرف اسم تكرار JS لأخذ أول واحد فقط
}
</script>
</head>
<body>
<!-إنشاء العناصر الديناميكية->
<type type = "button" value = "إنشاء علامة" onClick = "Test ()"/> <br/>
<type type = "button" value = "delete لإنشاء علامة" onClick = "Test2 ()"/>
<div id = "div1">
</div>
</body>
</html>
إنشاء نماذج متعددة بشكل ديناميكي:
انسخ الرمز كما يلي: <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) ؛
} ؛
وظيفة copybtn () {
var btn = document.createElement ("input") ؛
btn.type = "button" ؛
btn.value = this.value ؛
btn.iscopy = صحيح ؛
btn.onclick = copybtn ؛
document.body.appendchild (BTN) ؛
}
وظيفة ClearCopyBtn () {
var btns = document.getElementSbyTagName ("input") ؛
var length = btns.length ؛
لـ (var i = length-1 ؛ i> = 0 ؛ i--) {
إذا (btns [i] .iscopy) {
document.body.removechild (btns [i]) ؛
}
}
}
</script>
</head>
<body>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.