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 调用时，我得到了对 element.xml 的引用<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/

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>