لماذا لا تعمل HTML الخارجي؟

Question

أحاول الحصول على HTML الخارجي بطريقتين مختلفتين ، بناءً على هذا السؤال. لسوء الحظ ، لا أحد منهم يعطي النتيجة المتوقعة:

لغة البرمجة:

<div id='my_div'>Hello</div>

JS:

$(function() {
    document.write('[' + $('#my_div').clone().wrapAll("<div />").parent().get(0).innerHTML + ']<br />');
    document.write('[' + (new XMLSerializer().serializeToString(document.getElementById('my_div'))) + ']');
});

الإخراج هو:

[
Hello
]
[
Hello
]

أتوقع النتيجة التالية: <div id='my_div'>Hello</div>

مثال يعيش هنا

ما الخطأ الذي افعله ؟

Answer 1

أولاً، مثالك الأول يعمل بشكل جيد. ألق نظرة على إخراجك في Firebug. لاحظ ذلك منذ الإخراج الخاص بك هو HTML هو المقدمة كما HTML. لاحظ أن هناك خطوط جديدة قبل وبعد HELLO............... بسبب ال HELLOS داخل divs!

إلق نظرة:

---

الثاني ث/ jQuery ، يمكنك أيضا استخدام الطريقة في إجابتي على السؤال الذي ربطته:

var outerHTML =  $('<div>').append( $("#my_div").clone() ).html();

مثال JSFIDDLE

هذا يلحق استنساخ العنصر المعني إلى كائن jQuery div ويحصل على html الداخلية لكائن jQuery Div .... وهو Outerhtml للعنصر المعني.

الشكل العام من Outerhtml للعنصر هو:

$('<div>').append( $(ElementSelector).clone() ).html();

أين ElementSelector هو محدد jQuery للعنصر الذي تريده.

---

ملاحظة: لا يضيف ما سبق أي عناصر جديدة إلى DOM. $('<div>')...... لا يضاف إلى DOM. يبقى مجرد كائن jQuery مستقل عن DOM.

Answer 2

هنا وظيفة تستخدم في lib نقي للحصول على Outerhtml:

function outerHTML(node){
    return node.outerHTML || new XMLSerializer().serializeToString(node);
}

واستخدامها في طريق دوم:

var html = outerHTML(document.getElementById('my_div'));

Answer 3

تحديث مع العرض التوضيحي

   $(function() {
        var html = $('<div>').append($('#my_div').clone()).html();
        $('body').html( htmlspecialchars( '[' + html + ']' ) );
   });

• HTMLSPECIALCHARS وظيفة

Answer 4

جرب هذا:

var result = $('<div></div>').append($('#my_div').clone()).html();
alert(result);

Answer 5

يمكنك استخدام get لسحب عنصر DOM الأصلي ثم استخدام outerHTML كما :

var html = $('#my_div').get(0).outerHTML;

أو

var html = $('#my_div')[0].outerHTML;