أعتقد أن الجميع على دراية بسمة innerhtml لكائن DOM ، ولكن Outerhtml أقل استخدامًا. تقوم سمة InnerHTML بإرجاع HTML الموجود في كائن DOM من علامة البدء إلى علامة النهاية ، بينما تُرجع سمة OuterHtml HTML بما في ذلك علامة كائن DOM. يمكن أن يفسر الشكل التالي الفرق بين السمة جيدًا:
Outerhtml هي خاصية خاصة تخص IE في البداية. يمكنك عرض الوصف على خاصية MSDN: OUTERHTML (http://msdn.microsoft.com/en-us/library/ms534310(vs.85).aspx). حاليًا ، يمكن لـ IE و Chrome و Safari و Opera دعم هذه السمة. السبب وراء عدم دعم OuterHTML Firefox ، ستعود هذه السمة دائمًا غير محددة في Firefox. إنه لمن دواعي سروري أن يضيف HTML5 هذه السمة.
دعنا يتم تنفيذ سمات Firefox Support Outerhtml عن طريق توسيع النموذج الأولي htmlelement:
نسخة الكود كما يلي:
if (typeof (htmlelement)! = "undefined") {
htmlelement.prototype .__ Definesetter __ ("OuterHtml" ، Function (s) {
var r = this.OwnerDocument.createRange () ؛
R.SetStartBefore (هذا) ؛
var df = R.CreateContextualFragment (s) ؛
this.parentnode.replacechild (df ، this) ؛
العودة s ؛
}) ؛
htmlelement.prototype .__ definester __ ("OuterHtml" ، function () {
var a = this.attributes ، str = "<" this.tagname ، i = 0 ؛
لـ (؛ i <a.length ؛ i)
إذا (a [i]. محدد)
Str = "" Hormis dans Les Machines A يفضل الأكوان ، Les Casinos قبالة Res Jeux Par مثال على Grandes Six Roues ، Pai Go Poker ، Blackjack ، Baccarat ، la <a href = "http://topcasinosenligne.com/la-roulette"> roulette </a> a [i] .name "=" "a [i] .value" "" ؛
إذا (! this.canhavechildren)
إرجاع str " />" ؛
return str ">" this.innerhtml "<!-" this.tagname "->" ؛
}) ؛
htmlelement.prototype .__ definester __ ("canhavechildren" ، function () {
يعود
!/^(المنطقة | قاعدة | basefont |
العقيد | إطار | hr | img | br |
المدخلات | isIndex | الرابط | التعريف
| param) $/. test (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 ؛
} ؛
مقارنة بالطريقة أعلاه ، ليست هناك حاجة لتحريك النموذج الأولي ، وكمية الكود أصغر بكثير. أعتقد أنه سيكون هناك حلول أخرى.