Question

我有以下HTML：

<h3 onclick="replaceNextChild(this);">Some content...</h3>
<div>Div that I am interested in replacing</div>

我有以下JavaScript：

<script>
function replaceNextChild(element) {

   element.nextSibling.innerHTML = "I replaced the next element in the DOM";
}
</script>

为什么JavaScript不替换下一个元素？我也在使用jQuery，并不介意jQuery解决方案。

Answer 1

因为在许多浏览器中，nextSibling将是一个空文本节点。

改为使用nextElementSibling。

element.nextElementSibling.innerHTML = "I replaced the next element in the DOM";

您需要为不支持它的浏览器创建一个函数。

( element.nextElementSibling || nextElementSibling( element ) )
                           .innerHTML = "I replaced the next element in the DOM";

function nextElementSibling( el ) {
    if( el ) {
        while( (el = el.nextSibling) && el.nextSibling.nodeType !== 1 );
        return el;
    }
}

Answer 2

我正在使用jQuery，因此使用该库中的方法的任何解决方案也将非常有用

嗯，这改变了一点点：P

$(this).next().html('I replaced the next element in the DOM');

因为它是文本节点。如果您想更改文本节点，请设置nodeValue或data，否则可能会将您的功能更改为...

function replaceNextChild(element) {

   do {
       element = element.nextSibling;
   } while (element.nodeType != 1);

   element.innerHTML = "I replaced the next element in the DOM";
}

jsFiddle

但真的Patrick's answer（使用nextElementSibling要好得多。）

Answer 3

nextSibling属性返回紧跟在指定节点之后的节点，在同一树级别中。

返回的节点作为Node对象返回。

此属性与nextElementSibling的区别在于nextSibling将下一个兄弟节点作为元素节点，文本节点或注释节点返回，而nextElementSibling将下一个兄弟节点作为元素节点返回（忽略文本和注释节点）

此属性为只读。

http://www.w3schools.com/jsref/prop_node_nextsibling.asp

设置nextSibling的innerHTML

3 个答案: