กำหนดสตริงของแท็ก HTML ให้กับตัวแปร JavaScript นอกเหนือจากคำพูดสองเท่าที่หลบหนีของค่าแอตทริบิวต์สตริงยังคงยาวมากและดูเหมือนจะซับซ้อนเล็กน้อยในบางจุด หากคุณเพิ่มองค์ประกอบแบบไดนามิกด้วย JS จะไม่มีสตริงที่ซับซ้อนเช่นนี้และรหัสนั้นสามารถอ่านได้และเข้าใจง่ายกว่า
หน้าเว็บประกอบด้วย HTML Tags Layer โดย Layer และ JS ยังสามารถเพิ่มเลเยอร์ของแท็กเช่น div, Li และ IMG แบบไดนามิกแบบไดนามิก ในความเป็นจริงไม่ว่าแท็ก HTML จะเป็นอย่างไรวิธีการสร้างแบบไดนามิกของ JS นั้นคล้ายคลึงกัน จากนั้นเริ่มต้นด้วยการเพิ่ม divs แบบไดนามิก
1. เพิ่มองค์ประกอบ div แบบไดนามิกใน JS
<div id = "parent"> </div> ฟังก์ชั่น addelementDiv (obj) {var parent = document.getElementById (obj); // เพิ่ม div var div = document.createelement ("div"); // ตั้งค่าแอตทริบิวต์ DIV เช่น id div.setAttribute ("id", "newdiv"); div.innerhtml = "JS เพิ่ม DIV แบบไดนามิก"; parent.appendchild (div); -การโทร: AddElementDiv ("Parent");
2. เพิ่ม li แบบไดนามิกไปยัง JS
<ul id = "parentul"> <li> li ดั้งเดิม </li> </ul> ฟังก์ชั่น addelementli (obj) {var ul = document.getElementById (obj); // เพิ่ม li var li = document.createelement ("li"); // ตั้งค่าแอตทริบิวต์ li เช่น id li.setAttribute ("id", "newli"); li.innerhtml = "js เพิ่ม li แบบไดนามิก"; Ul.AppendChild (LI); -โทร: AddElementli ("Parentul");
3. เพิ่มองค์ประกอบ IMG แบบไดนามิกใน JS
<ul id = "parentul"> </ul> ฟังก์ชั่น addelementimg (obj) {var ul = document.getElementById (obj); // เพิ่ม li var li = document.createelement ("li"); // เพิ่ม img var img = document.createelement ("img"); // ตั้งค่าแอตทริบิวต์ IMG เช่น ID IMG.SetAttribute ("ID", "newImg"); // ตั้งค่าที่อยู่ภาพ IMG img.src = "/iMages/prod.jpg"; Li.AppendChild (IMG); Ul.AppendChild (LI); -โทร: AddElementImg ("Parentul");
บทความข้างต้นเกี่ยวกับ JS การเพิ่มองค์ประกอบแบบไดนามิก (div, li, img ฯลฯ ) และการตั้งค่าแอตทริบิวต์เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น