تحليل موجز لـ JS إنشاء عناصر ديناميكي [طريقتان]

مقدمة :

هناك طريقتان لإنشاء عناصر

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.createElement ()
2. العثور على العنصر الأصل: يمكن أن يتطابق مع محدد 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>

التحليل الموجز أعلاه لعناصر الإنشاء الديناميكي JS [طريقتان] هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.