JavaScript-innerHTMLなしでコンテナ要素にHTMLを追加


167

innerHTMLを使用せずにコンテナー要素にHTMLを追加する方法が必要です。innerHTMLを使用したくない理由は、次のように使用しているためです。

element.innerHTML += htmldata

古いHTMLと新しいHTMLを追加する前に、まずすべてのHTMLを置き換えることで機能します。埋め込みフラッシュビデオなどの動的メディアをリセットするため、これは良くありません...

私はこのようにそれを行うことができました:

var e = document.createElement('span');
e.innerHTML = htmldata;
element.appendChild(e);

ただし、その方法の問題は、ドキュメントに余分なスパンタグが存在することです。

これをどのように行うことができますか?ありがとう!


1
Jqueryを使用しないのはなぜですか?以下の詳細な回答を確認してください。stackoverflow.com/a/50482776/5320562
Loukan ElKadi 2018

回答:


102

別の方法を使用するにDocumentFragmentは(使用すると効果がないようです):新しく生成されたノードの子を反復処理してシミュレートし、それらを追加するだけです。

var e = document.createElement('div');
e.innerHTML = htmldata;

while(e.firstChild) {
    element.appendChild(e.firstChild);
}

2
私たちは「innerHTML」を使用しないソリューションを探していると思いました
kennydelacruz

1
@kennydelacruz:OPは、既存の要素を破棄して再作成するため、既存のHTMLに新しいHTML を追加したくありませんでした。OPは新しい要素を作成して追加することで解決策を見つけましたが、追加の要素を追加したくありませんでした。私はそのソリューションを拡張して、新しく作成された要素を移動/追加できることを示しました。これは既存の要素に影響を与えません。
Felix Kling

私はこれが古いことを知っていますが、なぜe.firstChildを反復できるのか誰にでも説明できますか?
Toastgeraet

1
@Toastgeraet:これは一例である反復されていない以上 e.firstChild。むしろ、e子があるかどうかをチェックし、子がある場合は、その子を要素に移動します。
Felix Kling

570

答えがどれもinsertAdjacentHTML()メソッドについて言及していないことに私は驚いています。それをチェックアウトここに。最初のパラメータは、文字列を追加して取る場所です( "beforebegin"、 "afterbegin"、 "beforeend"、 "afterend")。OPの状況では、 "beforeend"を使用します。2番目のパラメーターはhtml文字列です。

基本的な使い方:

var d1 = document.getElementById('one');
d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>');

53
だけでなく、あなたの解決策を試してみました。どちらも機能しますが、ループは2行で、ループはありません。私には勝者のように聞こえます。
Corwin01

3
このルートを選択する可能性のある人への参照:この方法は、IE9のテーブルではうまく機能しません。
Corwin01

2
Chromeではそれが教えてくれますUncaught TypeError: undefined is not a function
J86 2014年

19
この隠された宝石はもっと露出する必要があります。
Seth

このメソッドをノードではない何か、FYIだけで使用しようとすると、エラーが発生します。
Alex W

15

アルナフィーはこの質問に対して素晴らしい答えを持っています。私は参考のために彼のコードの例を挙げたかった:

var childNumber = 3;

function addChild() {
  var parent = document.getElementById('i-want-more-children');
  var newChild = '<p>Child ' + childNumber + '</p>';
  parent.insertAdjacentHTML('beforeend', newChild);
  childNumber++;
}
body {
  text-align: center;
}
button {
  background: rgba(7, 99, 53, .1);
  border: 3px solid rgba(7, 99, 53, 1);
  border-radius: 5px;
  color: rgba(7, 99, 53, 1);
  cursor: pointer;
  line-height: 40px;
  font-size: 30px;
  outline: none;
  padding: 0 20px;
  transition: all .3s;
}
button:hover {
  background: rgba(7, 99, 53, 1);
  color: rgba(255,255,255,1);
}
p {
  font-size: 20px;
  font-weight: bold;
}
<button type="button" onclick="addChild()">Append Child</button>
<div id="i-want-more-children">
  <p>Child 1</p>
  <p>Child 2</p>
</div>

うまくいけば、これは他の人に役立つでしょう。


2
ルールにこだわるのは嫌いですが、デモ(jsfiddle、codepenなど)を作成し、編集機能を使用するかコメントを送信して、それをAlnafieの回答に追加した方が良かったと思います。他のユーザーの回答を示すためだけに回答を作成することは、提供した情報がどれほど役立つかに関係なく、SOがどのように機能するかではありません。すべてのユーザーが回答を作成して別の回答を示すことにした場合を想像してみてください。
マーティンジェームズ

2
<div id="Result">
</div>

<script>
for(var i=0; i<=10; i++){
var data = "<b>vijay</b>";
 document.getElementById('Result').innerHTML += data;
}
</script>

「+ =」記号を使用してdivのデータを割り当てます。前のhtmlデータを含むデータを追加できます


11
質問では特にを使用しないことが必要element.innerHTML += dataです。
musicnothing

1

これDocumentFragmentが意図されたものです。

var frag = document.createDocumentFragment();
var span = document.createElement("span");
span.innerHTML = htmldata;
for (var i = 0, ii = span.childNodes.length; i < ii; i++) {
    frag.appendChild(span.childNodes[i]);
}
element.appendChild(frag);

document.createDocumentFragment.childNodes


私はこれをテストしただけで動作しません。それはどのように使用すべきですか?
Bob

どこ(a)から来たの?それはタイプミスですか。
Ash Burlaczenko

1
はい、それはタイプミスです。eである必要があります。フラグメントにinnerHTMLを使用できるとは思いません。これは機能していません
ボブ

@ボブ私は警官の使用jQueryに行ってきました。
レイノス2011年

jQueryいいえ 1つの小さな関数だけにjQueryを含めるつもりはありません:\やり過ぎです
Bob

-1

釣り方と厳格なコードを使用ながら。この投稿の下部には、2つの必須関数が必要です。

xml_add('before', id_('element_after'), '<span xmlns="http://www.w3.org/1999/xhtml">Some text.</span>');

xml_add('after', id_('element_before'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');

xml_add('inside', id_('element_parent'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');

複数の要素を追加します(名前空間は親要素にのみ必要です)。

xml_add('inside', id_('element_parent'), '<div xmlns="http://www.w3.org/1999/xhtml"><input type="text" /><input type="button" /></div>');

動的に再利用可能なコード:

function id_(id) {return (document.getElementById(id)) ? document.getElementById(id) : false;}

function xml_add(pos, e, xml)
{
 e = (typeof e == 'string' && id_(e)) ? id_(e) : e;

 if (e.nodeName)
 {
  if (pos=='after') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e.nextSibling);}
  else if (pos=='before') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
  else if (pos=='inside') {e.appendChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true));}
  else if (pos=='replace') {e.parentNode.replaceChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
  //Add fragment and have it returned.
 }
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.