javascript - 用 Ajax 响应替换 DOM 节点

Question

我有一个如下所示的 ajax 响应:

<div class = "element3"> some other text</div>

我想用 resp 替换下面的 element1:

<div class = "a">
  <div class = "element1"></div>
  <div class = "element2"></div>
</div>

所以在替换之后我会得到:

<div class = "a">
  <div class = "element3"> some other text</div>
  <div class = "element2"></div>
</div>

我试过 replaceChild() 但它不起作用，因为响应不是 DOM 对象..

谢谢!

Answer 1

innerHTML() 只替换标签之间的内容，outerHTML() 将允许您替换开始和结束标签，有效地替换 DOM节点。

var element = document.getElementsByClassName('element1')[0];
element.outerHTML("<div class = 'element3'> some other text</div>");

见:

• http://help.dottoro.com/ljloliex.php
  
• http://help.dottoro.com/ljdkwhqf.php
  
  

注意:由于使用了 getElementsByClassName()，此解决方案适用于(参见:http://caniuse.com/getelementsbyclassname):

• Internet Explorer 9+
  
• 火狐 3+
  
• Opera 9.5+
  
• Chrome 4+
  
• Safari 3.1+