web-dev-qa-db-ja.com

appendChild + createElement

次の違いは何ですか？

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番目のバージョンを機能させることができますか？

javascripthtmlappendchild
17
user317005

後者はHTMLを含む単なる文字列ですが、最初の文字列はオブジェクトです。最初の場合はappendChildが必要ですが、2番目の場合はinnerHTMLに追加する必要があります。

両方が同じであってはいけませんか？そうでない場合、どのように2番目のバージョンを動作させるのですか？

var div = '<div></div>';
document.getElementById('container').innerHTML += div;
30
Sarfraz

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

最初の例では、<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;
8
strager

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

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

しかし、私は本当に最初のバージョンを好みます。そして、ブラウザ間で同じ動作をするためにもっと頼りにしたいと思います。

4
David Hedlund

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

$('#container').append('<div></div>');
2
Dan Heberden

すべてのブラウザをサポートする最も簡単なソリューションは次のとおりです。

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
1
Sergio

これらを使用して、要素をDOMにそれぞれ追加/追加することもできます。

var elem = document.documentElement.appendChild(document.createElement(element));
var elem = document.documentElement.prepend(document.createElement(element));

elem変数を使用して要素をターゲットにします（例）：

elem.style.display = "block";
elem.style.remove();
elem.style.id = ...;

等.

0
guest54392850