通过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>元素。

---

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

Everthing，我可以尝试尝试但我无法插入节点。我假设我做错了什么。我的尝试是，

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和appendChild方法将其添加到文档中：

pElement.parentNode.appendChild(p);

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