用 Ajax 响应替换 DOM 节点

Question

I have an ajax response which looks like this:

<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对象。

谢谢！

- Andy Chen

---

如果使用jQuery，请使用replaceWith。 - Amareswar

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+
  
• Firefox 3+
  
• Opera 9.5+
  
• Chrome 4+
  
• Safari 3.1+
  

- coderabbi

Answer 2

我建议，虽然你已经有了一个答案，但以下是我的建议：

var newContent = '<div class = "element3"> some other text</div>',
    temp = document.createElement('div'),
    div1 = document.getElementsByClassName('element1')[0];

temp.innerHTML = newContent;

div1.parentNode.replaceChild(temp.firstChild, div1);​

JS Fiddle演示。

鉴于您的问题基本上是“新内容”不是DOM节点，最明智的解决方案是简单地将其制作为DOM节点。虽然这当然带有使用document.getElementsByClassName()的跨浏览器注意事项。

以下是一个跨浏览器版本，应该为那些不支持document.getElementsByClassName()的浏览器提供后备（适用于IE 7，其他版本不可用；值得注意的是三元条件可能需要升级以应对某些浏览器可能处理条件评估的方式）：

function findByClassName(classname, el) {
    if (!classname) {
        return false;
    }
    else {
        el = !el ? document.getElementsByTagName('body')[0] : el;
        var children = el.getElementsByTagName('*'),
            withClass = [];

        for (var i = 0, len = children.length; i < len; i++) {
            if (children[i].nodeType == 1) {
                var classes = children[i].className.split(/\s+/);
                for (var c = 0, leng = classes.length; c < leng; c++) {
                    if (classes[c] == classname) {
                        withClass.push(children[i]);
                    }
                }
            }
        }

        return withClass;
    }
}

var newContent = '<div class = "element3"> some other text</div>',
    temp = document.createElement('div'),
    div1 = document.getElementsByClassName ? document.getElementsByClassName('element1')[0] : findByClassName('element1')[0];

temp.innerHTML = newContent;

div1.parentNode.replaceChild(temp.firstChild, div1);​

JS Fiddle演示。

参考资料：

• document.getElementsByClassName()的兼容性。
• element.outerHTML的兼容性。

- David Thomas

Answer 3

如果您只想替换文本，请在目标元素上设置 innerText 属性。如果您想插入所有 HTML，请在目标元素上设置 innerHTML 属性。如果要替换目标元素本身，我相信您可以使用 outerHTML。

- Trott

---

基本上我想删除element1并添加element3， "a"的innerHTML也会摆脱element2，并且element1的innerHTML将导致<div class =“ element1”> <div class =“ element3”>一些其他文本</div> </ div> @Trott - Andy Chen

Answer 4

这是一个jsFiddle示例，用于替换DOM元素。

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

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

var element = document.getElementsByClassName('element1')[0];
var replacement = document.getElementsByClassName('element3')[0];
element.parentNode.replaceChild(replacement, element);

- krg