dhtml มีสองวิธีในการเพิ่ม insertAdjacentHTML และ insertAdjacentText
วิธีการ insertAdjacentHTML: แทรกคำสั่งแท็ก html ที่ตำแหน่งที่ระบุ
ต้นแบบ: insertAdjacentHTML(swhere,stext)
พารามิเตอร์:
swhere: ระบุตำแหน่งที่จะแทรกคำสั่งแท็ก html ที่มีอยู่สี่ค่า:
1.beforeBegin: แทรกก่อนจุดเริ่มต้นของป้ายกำกับ
2.afterBegin: แทรกหลังแท็กเริ่มต้นของป้ายกำกับ
3.beforeEnd: แทรกก่อนแท็กปิดท้ายของแท็ก
4.afterEnd: แทรกหลังแท็กปิดท้ายของฉลาก
stext: เนื้อหาที่จะแทรก
ตัวอย่าง:
คัดลอกรหัสรหัสดังต่อไปนี้:
var sHTML="<input type=button go2()" + " value='คลิกฉัน'><BR>"
var sScript='<สคริปต์เลื่อน>'
sScript = sScript + 'function go2(){ alert("สวัสดีจากสคริปต์ที่แทรกไว้") }'
sScript = sScript + '</script' + '>';
ScriptDiv.insertAdjacentHTML("afterBegin",sHTML + sScript);
เพิ่มบรรทัดลงในเนื้อหา html:
<DIV ID="ScriptDiv"></Div>
ในที่สุดมันจะกลายเป็น:
คัดลอกรหัสรหัสดังต่อไปนี้:
<DIV ID="ScriptDiv">
<input type=button onclick=go2() value='คลิกฉัน'><BR>
<เลื่อนสคริปต์>
function go2(){alert("สวัสดีจาก sctipt ที่แทรกไว้")}'
</สคริปต์>
</DIV>
เมธอด insertAdjacentText คล้ายกับเมธอด insertAdjacentHTML ยกเว้นว่าสามารถแทรกได้เฉพาะข้อความธรรมดาและมีพารามิเตอร์เดียวกัน
คุณลักษณะทั้งสองนี้ค่อนข้างใช้ได้ โดยเฉพาะในการวาดภาพและที่อื่นๆ ข้อดีคือ จะไม่เขียนทับเนื้อหาต้นฉบับ ให้เราสมมติว่ามี DIV ที่มีเนื้อหาอยู่แล้ว ในตอนนี้ เราต้องเพิ่มเนื้อหาแบบไดนามิกโดยไม่ต้องเขียนทับ เนื้อหาต้นฉบับ ดังนั้นสิ่งนี้จึงสำคัญมากในเวลานี้ innerHTML จะเขียนทับเนื้อหาต้นฉบับ
HTML ทั้งหมดที่ปรากฏเป็นคู่สามารถใช้แอตทริบิวต์นี้ ซึ่งเหมือนกับ innerHTML ตัวอย่างเช่น <body>..</body>, <div>....</div> ฯลฯ ล้วนมีแอตทริบิวต์ทั้งสองนี้ .
ภาคผนวก: ฉันเพิ่งลองใช้และแอตทริบิวต์ innerHTML สามารถอ่านและเขียนได้ ฉันเคยรู้ว่า innerHTML สามารถแทรกเนื้อหาลงในโหนดได้ แต่แอตทริบิวต์นี้ก็สามารถอ่านได้ ซึ่งหมายความว่า InnerHTML จะบันทึกเนื้อหา html ของโหนด ดูที่คุณสามารถทำได้ ทำความเข้าใจให้ครบถ้วนโดยทำตามโค้ดต่อไปนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
<html>
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>เอกสารที่ไม่มีชื่อ</title>
</หัว>
<ร่างกาย>
สถานที่ safdsdaf ตรงเวลา
<ภาษาสคริปต์ = "จาวาสคริปต์">
การแจ้งเตือน (document.body.innerText)
</สคริปต์>
</ร่างกาย>
</html>
ด้านบนเป็นโค้ดที่ฉันส่งต่อให้ผู้อื่น ฉันจะเพิ่มโค้ดอีกสองสามบรรทัดด้านล่าง มันอาจจะคลาสสิกมากเช่นกัน
คัดลอกรหัสรหัสดังต่อไปนี้:
<script language="javascript" type="text/javascript">
ฟังก์ชั่น addFile()
-
var filebutton = '<br><input type="file" size="50" name="File" />';
document.getElementByIdx('FileList').insertAdjacentHTML("beforeEnd",filebutton);
-
</สคริปต์>
ด้านบนคือสคริปต์ใน Head และต่อไปนี้คือโค้ด html ในส่วนเนื้อหา:
คัดลอกรหัสรหัสดังต่อไปนี้:
<p id="รายการไฟล์">
<input type="file" runat="server" size="50" name="File"/>
</p>
คุณสามารถเห็นผลได้โดยการคัดลอกโค้ดลงในไฟล์และบันทึกเป็น html