javascript - javascriptによる子ノードの追加

Question

ページの読み込み中にajaxを介して動的にhtmlを生成しました。次のようになります。

動的に挿入され、

<p class="Hello">
  <span id='click lvl1'>1</span>
  <span>2</span>
</p>

現在、<p>要素に別のノードを追加しようとしています。繰り返しますが、動的にajaxを介して。

サーバーの応答は次のようなものです。

<p class="Hello lvl2">
  <span id='click'>1</span>
  <span>2</span>
</p>

初めて手に入れた要素に挿入したいもの。

最終結果、

<p class="Hello">
  <span id='click'>1</span>
  <span>2</span>
  <p class="Hello lvl2">
   <span id='click'>1</span>
   <span>2</span>
  </p>
</p>

2番目のajax呼び出しを行っているときに、要素への参照を取得しています<span id='click lvl1'>1</span>。

---

これまでに何を試しましたか？

すべて、試したことはありますが、ノードを挿入できません。私は本当に間違ったことをしていると思います。私の試みは、

pElementは<span id='click'>1</span>

1. pElement.parent().appendChild(data.expandTreeVal);
2. pElement.parent().append(data.expandTreeVal);
3. pElement.parent().after(data.expandTreeVal);
4. pElement.parentNode().appendChild(data.expandTreeVal);

デバッグ

私は本当にサーバーから何かを得ていますか？

はい、そうするとalert(data.expandTreeVal);、希望のHTMLが表示されます。

どんな考えでも大きな助けになります。

Answer 1

要素に追加できるのはDOM要素のみであり、文字列にHTMLコードを追加することはできません。

要素を作成し、innerHTMLメソッドを使用してHTMLコードをその中に配置し、その要素から最初の子ノードを取得して、そのp要素をDOM要素として取得します。

var div = document.createElement('DIV');
div.innerHTML = data.expandTreeVal;
var p = div.childNodes[0];

parentNode次に、 andappendChildメソッドを使用してドキュメントに追加できます。

pElement.parentNode.appendChild(p);

デモ： http： //jsfiddle.net/AfVfE/

Answer 2

私が完全に理解するには、本格的なユースケースを投稿する必要があるかもしれませんが、全体的な問題は、存在しないメソッドを参照していることだと思います。

私のユースケースは次のようにうまく機能しました：

<p class="Hello">
  <span id='click'>1</span>
  <span>2</span>
  <p class="Hello lvl2">
   <span id='click'>1</span>
   <span>2</span>
  </p>
</p>

このJSで：

​var pElement = document.getElementById('click');
alert(pElement.parentNode);​​​

</ p>