web-dev-qa-db-ja.com

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

InnerHTMLを使わずにコンテナ要素にHTMLを追加する方法が必要です。私がinnerHTMLを使いたくないのは、それがこんなときに使われるからです。

element.innerHTML += htmldata

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

私はそれがうまくいくこの方法でそれをすることができました：

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

しかし、その方法の問題点は、文書に余分なspanタグがあることです。

どうすればこれができますか？ありがとうございます。

javascripthtmlinnerhtml
135
Bob

（DocumentFragmentを使用しても機能しないように）代替手段を指定するには：新しく生成されたノードの子を反復処理してそれらを追加するだけでシミュレートできます。

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

while(e.firstChild) {
    element.appendChild(e.firstChild);
}
80
Felix Kling

insertAdjacentHTML()メソッドについて言及されている答えがないことに驚きました。それをチェックしてください ここ 。最初のパラメータは、文字列を追加して取得する場所です（ "beforebegin"、 "afterbegin"、 "beforeend"、 "afterend"）。 OPの状況では "beforeend"を使うでしょう。 2番目のパラメータはHTML文字列です。

基本的な使い方

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

alnafieはこの質問に対して素晴らしい答えを持っています。私は参考のために彼のコードの例を挙げたいと思いました：

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>

うまくいけば、これは他の人に役立ちます。

12
Trevor Nestman
<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データを含むデータを追加できます。

2
vijay

これが 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

1
Raynos