7

この質問に基づいて、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>

実例はこちら

私は何を間違っていますか？

4

5 に答える 5

5

以下は、outerHTML を取得するためにlib pure.jsで使用される関数です。

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

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

var html = outerHTML(document.getElementById('my_div'));
于 2010-09-19T20:23:29.093 に答える
5

まず、最初の例は正常に動作します。出力をFirebugで見てください。出力は HTMLであるため、 HTML としてレンダリングされることに注意してください。s は DIV 内にHELLOあるため、 ....... の前後に改行があることに注意してください。HELLO

見てみましょう： 代替テキスト

2番目にjQueryを使用すると、リンク先の質問に対する私の回答でメソッドを使用することもできます:

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

jsFiddle の例


これにより、問題の要素のクローンが DIV jQuery オブジェクトに追加され、DIV jQuery オブジェクトの内部 HTML が取得されます。これは、問題の要素の外部 HTML です。

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

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

whereElementSelectorは、outerHTML が必要な要素の jQuery セレクターです。

注: 上記は DOM に新しい要素を追加しません。$('<div>')......DOM に追加されることはありません。DOM から独立した単なる jQuery オブジェクトのままです。

于 2010-09-19T21:34:55.167 に答える
2

デモで更新 

   $(function() {
        var html = $('<div>').append($('#my_div').clone()).html();
        $('body').html( htmlspecialchars( '[' + html + ']' ) );
   });
于 2010-09-19T14:18:52.680 に答える
0

これを試して：

var result = $('<div></div>').append($('#my_div').clone()).html();
alert(result);
于 2010-09-19T14:32:59.963 に答える