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 ）：

• 互联网浏览器 9+
  
• 火狐 3+
  
• 歌剧 9.5+
  
• 铬 4+
  
• Safari 3.1+
  

Answer 2

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

Answer 3

我建议，虽然您已经有了答案，但以下内容：

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 小提琴演示。

鉴于您的问题基本上是“新内容”不是 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 小提琴演示。

参考：

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

Answer 4

这是一个用另一个 DOMElement 替换 DOMElement的jsFiddle示例。

<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);