22

次の違いは何ですか:

var div = document.createElement('div');//output -> [object HTMLDivElement]

document.getElementById('container').appendChild(div);

と：

var div = '<div></div>';

document.getElementById('container').appendChild(div);//output -> <div></div>

どちらも同じではないでしょうか？そうでない場合、どうすれば 2 番目のバージョンを動作させることができますか?

4

6 に答える 6

32

後者は単にHTMLを含む文字列であり、前者はオブジェクトです。1つ目は必要appendChildですが、2つ目はに追加する必要がありますinnerHTML。

両方が同じであるべきではありませんか？そうでない場合、2番目のバージョンを機能させるにはどうすればよいですか？

var div = '<div></div>';
document.getElementById('container').innerHTML += div;
于 2010-05-24T07:11:06.433 に答える
10

JS / DOMエンジンでは、引数としてElement.appendChildaを呼び出すと、新しいノードが作成されてから追加されます。stringText

最初の例では、<div>要素を作成します。2番目の例では、<div></div>コンテンツとしてテキストノードを作成します。

2番目の例は次と同等です。

var div = '<div></div>';

document.getElementById('container').appendChild(document.createTextNode(div));//output -> <div></div>

Sarfraz Ahmedが彼の回答で述べたように、次のように書くことで、2番目の例を希望どおりに機能させることができます。

var div = '<div></div>';

document.getElementById('container').innerHTML = div;
于 2010-05-24T07:14:07.663 に答える
4

appendChild文字列ではなく、などのHTMLDomNodeを実際に期待しHTMLDivElementます。文字列の扱い方がわかりません。あなたができる

document.getElementById('container').innerHTML += div;

しかし、私は本当に最初のバージョンを好みます。ブラウザー間で同じように動作するためには、これにもっと依存します。

于 2010-05-24T07:12:44.030 に答える
2

appendChildは要素を予期しているため、テキストを送信すると、何をすべきかわかりません。jQueryなどの作業を容易にするために、javascriptライブラリの使用を検討することをお勧めします。コードは次のようになります。

$('#container').append('<div></div>');
于 2010-05-24T07:11:49.833 に答える
1

すべてのブラウザーをサポートする最も簡単な解決策は次のとおりです。

var div = '<div></div>';
var parser = new DOMParser();
var myDiv = parser.parseFromString( html, "text/xml" );

別の解決策は次のとおりです。

var div = '<div></div>';
var tmpDiv = document.createElement('div');
    tmpDiv.innerHTML = div;

    elDiv = tmpDiv.childNodes[0]; //Now it can be used as an element
于 2014-02-07T23:38:34.927 に答える