การวิเคราะห์สั้น ๆ ของ JS การสร้างองค์ประกอบแบบไดนามิก [สองวิธี]

คำนำ :

มีสองวิธีในการสร้างองค์ประกอบ

1) ประกบองค์ประกอบที่คุณต้องสร้างในรูปแบบของสตริง ค้นหาองค์ประกอบหลักและกำหนด innerhtml โดยตรงขององค์ประกอบหลัก

2) ใช้ฟังก์ชั่นบางอย่างที่จัดทำโดยเอกสารและวัตถุองค์ประกอบเพื่อให้ได้การสร้างองค์ประกอบแบบไดนามิก (สร้างองค์ประกอบ => ค้นหาองค์ประกอบหลัก => องค์ประกอบแทรกที่ตำแหน่งที่ระบุ)

1. ฟอร์มการประกบสตริง

เพื่อความเข้าใจที่ดีขึ้นให้ตั้งค่าสถานการณ์แอปพลิเคชัน

แบบสุ่มสร้างชุดตัวเลขแสดงชุดข้อมูลนี้ลงในแผนภูมิแท่งและวางไว้ใน div [id = "คอนเทนเนอร์"] ดังแสดงในรูปด้านล่าง

 <div id = "container"> </div> <script> window.onload = function () {var str = ''; สำหรับ (var i = 0; i <30; i ++) {var r = parseint (math.random ()*100); // สุ่มสร้างตัวเลข str+= '<div>'+r+'</div>'; // split str} document.getElementById ('คอนเทนเนอร์'). innerhtml = str; } </script>

2. ใช้ฟังก์ชั่นบางอย่างที่มาพร้อมกับเอกสารและวัตถุองค์ประกอบ

นอกจากนี้ยังตั้งค่าสถานการณ์แอปพลิเคชันดังที่แสดงในรูปด้านล่าง

รับข้อมูลในอินพุตและแทรกไปทางซ้ายหรือขวาของสี่เหลี่ยมสีแดงด้านล่างตามปุ่มทางด้านขวา

การแก้ปัญหาแบ่งออกเป็นสามขั้นตอน :

1. สร้างองค์ประกอบ: document.createElement ()
2. ค้นหาองค์ประกอบหลัก: สามารถจับคู่ตัวเลือก CSS ที่ระบุผ่าน ID, ชื่อ, ชื่อแท็ก, คลาสและ
3. แทรกองค์ประกอบที่ตำแหน่งที่ระบุ: Element.AppendChild (), Element.InsertBefore ()

รหัสการใช้งาน:

 <div id = "div-input"> <อินพุต type = "text" id = "txt_input" value = "4"/> <อินพุต type = "ปุ่ม" id = "leftInsert" value = "leftInsert"/> <อินพุตประเภท = "ปุ่ม" id = "rightinSert" <span> 3 </span> </div> <script> window.onload = function () {var inputValue = document.getElementById ('txt_input') ค่า; document.getElementById ('leftInsert'). onClick = function () {// อินพุต var span ที่ด้านซ้าย = document.createElement ('span'); // 1. สร้าง Element Span.innerhtml = InputValue; var container = document.getElementById ('คอนเทนเนอร์'); // 2. ค้นหาองค์ประกอบหลักของคอนเทนเนอร์. insertbefore (span, container.childnodes [0]); // แทรกไปยัง document.getElementById ('rightInsert'). onClick = function () {// อินพุต var span ที่ด้านขวา = document.createElement ('span'); // 1. สร้าง Element Span.innerhtml = InputValue; var container = document.getElementById ('คอนเทนเนอร์'); // 2. ค้นหาองค์ประกอบขององค์ประกอบหลัก. AppendChild (Span); // 3. เพิ่มองค์ประกอบในตอนท้าย}} </script>

การวิเคราะห์สั้น ๆ ข้างต้นขององค์ประกอบการสร้างไดนามิก JS [สองวิธี] คือเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น