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>

在进行第二个 ajax 调用时，我得到了对<span id='click lvl1'>1</span> 的引用元素。

---

到目前为止我尝试了什么？

一切，我可以尝试我已经尝试过但我无法插入节点。我假设我做错了什么。我的尝试是，

p元素是<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 和appendChild 方法将其添加到文档中:

pElement.parentNode.appendChild(p);

演示:http://jsfiddle.net/AfVfE/