ฉันเชื่อว่าทุกคนคุ้นเคยกับแอตทริบิวต์ InnerHTML ของวัตถุ DOM แต่ outerhtml ใช้น้อยกว่า แอตทริบิวต์ InnerHTML ส่งคืน HTML ที่มีอยู่ในวัตถุ DOM จากแท็กเริ่มต้นไปยังแท็กปลายในขณะที่แอตทริบิวต์ OUTERHTML ส่งคืน HTML รวมถึงแท็กของวัตถุ DOM รูปต่อไปนี้สามารถอธิบายความแตกต่างระหว่างสองแอตทริบิวต์ได้ดี:
Outerhtml เป็นทรัพย์สินส่วนตัวที่เป็นของ IE ในตอนแรก คุณสามารถดูคำอธิบายบนคุณสมบัติ MSDN: OUTERHTML (http://msdn.microsoft.com/en-us/library/MS534310(VS.85).aspx) ปัจจุบันคือ Chrome, Safari และ Opera สามารถรองรับคุณลักษณะนี้ได้ เหตุผลที่ outerhtml ไม่รองรับ Firefox คุณลักษณะนี้จะกลับมาไม่ได้กำหนดใน Firefox เสมอ เป็นเรื่องน่ายินดีที่ HTML5 จะเพิ่มแอตทริบิวต์นี้
ให้ Firefox รองรับคุณลักษณะ outerhtml จะนำไปใช้โดยการขยายต้นแบบ HTMlelement:
การคัดลอกรหัสมีดังนี้:
if (typeof (htmlelement)! = "undefined") {
htmlelement.prototype .__ definesetter __ ("outerhtml", ฟังก์ชั่น (s) {
var r = this.ownerDocument.createrange ();
R.SetStartBefore (นี้);
var df = r.createContextualFragment (s);
this.parentnode.replacechild (df, this);
กลับ s;
-
htmlelement.prototype .__ definetter __ ("outerhtml", function () {
var a = this.attributes, str = "<" this.tagname, i = 0;
สำหรับ (; i <a.length; i)
if (a [i]. ระบุ)
str = "" ฮอร์โมน dans les เครื่องจักรที่ชอบจักรวาล, les casinos ปิด res jeux par ตัวอย่าง Grandes หก roues, pai go โป๊กเกอร์, แบล็คแจ็ค, baccarat, la <a href = "http://topcasinosenligne.com/la-roulette" a [i] .name "=" "a [i] .value" "";
ถ้า (! this.canhavechildren)
return str " />";
return str ">" this.innerhtml "<!-" this.tagname "->";
-
htmlelement.prototype .__ definetter __ ("Canhavechildren", function () {
กลับ
!/^(พื้นที่ | ฐาน | basefont |
COL | FRAME | HR | IMG | BR |
อินพุต | ISINDEX | LINK | META
| param) $/. ทดสอบ (this.tagname.toLowerCase ());
-
-
วิธีนี้มาจาก w3help (http://www.w3help.org/zh-cn/causes/sd9017) ซึ่งค่อนข้างยุ่งยากและต้องมีการบุกรุกเข้าสู่ต้นแบบ นอกจากนี้ยังมีทางเลือกที่ง่ายกว่า ก่อนอื่นสร้างโหนดที่ว่างเปล่าเพิ่มวัตถุ DOM เพื่อรับแอตทริบิวต์ outerhtml ไปยังโหนดที่ว่างเปล่านี้จากนั้นเข้าถึง innerhtml ของโหนดที่ว่างเปล่านี้:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น outerhtml (elem) {
if (typeof elem === "string") elem = document.getElementById (elem);
// สร้างโหนด div ที่ว่างเปล่า
var div = document.createElement ("div");
// แทรก elemcopy ที่คัดลอกลงในโหนด div ที่ว่างเปล่า
Div.AppendChild (Elem.Clonenode (TRUE));
// ส่งคืนเนื้อหา html ของ div
กลับ div.innerhtml;
-
เมื่อเปรียบเทียบกับวิธีการข้างต้นไม่จำเป็นต้องย้ายต้นแบบและปริมาณของรหัสมีขนาดเล็กลงมาก ฉันเชื่อว่าจะมีวิธีแก้ปัญหาอื่น ๆ