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()将允许您替换开头和＆amp;关闭标签，有效地替换DOM节点。

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

参见：

注意：由于使用getElementsByClassName()，此解决方案适用于（请参阅：http://caniuse.com/getelementsbyclassname）：

Internet Explorer 9+
Firefox 3+
Opera 9.5+
Chrome 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 Fiddle demo

鉴于你的问题基本上是'新内容'不是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 demo

参考文献：

Answer 4

这是一个jsFiddle示例，用于将DOMElement替换为另一个。

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

用Ajax响应替换DOM节点

4 个答案: