なぜ外側のHTMLを取得しても機能しないのですか？

Question

私は2つの異なる方法で外側のHTMLを取得しようとします。 この質問. 。残念ながら、それらのどれも期待される結果を与えていません：

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はdivにあります！

見てください：

---

2番目のjquery、使用することもできます あなたがリンクした質問に対する私の答えの方法:

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

jsfiddleの例

これにより、問題の要素のクローンがDiv JQueryオブジェクトに追加され、Div JQueryオブジェクトの内側のHTMLが取得されます。

要素のouterhtmlの一般的な形式は次のとおりです。

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

どこ ElementSelector あなたが望むouterhtmlを持つ要素のjQueryセレクターです。

---

注：上記は、DOMに新しい要素を追加しません。 $('<div>')...... DOMに追加されることはありません。それは単にDOMとは無関係にjQueryオブジェクトのままです。

Answer 2

Libで使用される関数は次のとおりです pure.js outerhtmlを取得するには：

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

そして、それをDOMの方法で使用するために：

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;