設置nextSibling

Question

的innerHTML的

我有以下的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屬性在同一樹級別中返回緊接在指定節點後面的節點。

返回的節點作爲節點對象返回。

此屬性與nextElementSibling的區別在於nextSibling將下一個兄弟節點作爲元素節點，文本節點或註釋節點返回，而nextElementSibling將下一個兄弟節點作爲元素節點返回（忽略文本和註釋節點）。

此屬性是隻讀的。

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