تشارك هذه المقالة طريقتين لإنشاء عناصر للرجوع إليها. المحتوى المحدد كما يلي
1) لصق العناصر التي تحتاج إلى إنشائها في شكل سلسلة ؛ ابحث عن العنصر الأصل وقم بتعيين innerhtml مباشرة للعنصر الأصل.
2) استخدم بعض الوظائف التي توفرها كائنات المستند والعناصر لتحقيق إنشاء عناصر ديناميكية (إنشاء عناصر => ابحث عن عناصر الأصل => إدراج عناصر في الموضع المحدد)
1. نموذج الربط
لفهم أفضل ، قم بتعيين سيناريو التطبيق.
قم بإنشاء مجموعة من الأرقام بشكل عشوائي ، وتقديم هذه المجموعة من البيانات في مخطط شريط ، ووضعها في Div [id = "Container"] ، كما هو موضح في الشكل أدناه
<div id = "container"> </viv> <script> window.onload = function () {var str = '' ؛ لـ (var i = 0 ؛ i <30 ؛ i ++) {var r = parseint (math.random ()*100) ؛ // Random قم بإنشاء رقم str+= '<viv>'+r+'</viv>' ؛ // split str} document.getElementById ('Container'). innerhtml = str ؛ } </script>2. استخدم بعض الوظائف التي تأتي مع كائنات المستند والعناصر
قم أيضًا بتعيين سيناريو التطبيق ، كما هو موضح في الشكل أدناه
احصل على المعلومات الموجودة في الإدخال وأدخلها على اليسار أو يمين المستطيل الأحمر أدناه وفقًا للزر الموجود على اليمين.
ينقسم الحل إلى ثلاث خطوات:
1. إنشاء عنصر: document.createlement ()
2. ابحث عن العنصر الأصل: يمكنك مطابقة محدد CSS المحدد من خلال المعرف والاسم واسم التسمية والفئة ومطابقة محدد CSS المحدد
3. إدراج عناصر في الموضع المحدد: element.appendchild () ، element.insertbefore ()
رمز التنفيذ:
<div id = "div-input"> <type type = "text" id = "txt_input" value = "4"/> <input type = "button" id = "leftInsert" value = "LeftInsert"/> <input type = "button" id = "leightInsert" <span> 3 </span> </viv> <script> window.onload = function () {var inputValue = document.getElementById ('txt_input'). value ؛ document.getElementById ('LeftInsert'). onClick = function () {// input var span على الجانب الأيسر = document.createElement ('span') ؛ // 1. إنشاء عنصر span.innerhtml = inputValue ؛ var container = document.getElementById ('حاوية') ؛ // 2. ابحث عن حاوية العنصر الأصل. // insert to the reconded}} document.getElementById ('rightInsert'). onClick = function () {// input var span على الجانب الأيمن = document.createElement ('span') ؛ // 1. إنشاء عنصر span.innerhtml = inputValue ؛ var container = document.getElementById ('حاوية') ؛ // 2. ابحث عن حاوية العنصر الأصل. appendchild (span) ؛ // 3. إضافة عنصر في النهاية}} </script>ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.