javascript改变innerHTML

Question

我想使用另一个div的nextSibling来改变div"act"的内容.
但结果是 - 未定义.

function inner(){
var abc = document.getElementById("start").nextSibling;
document.getElementById("act").innerHTML = abc.innerHTML;
 }

<img id="btnRight" src="img/btnRight.png" onclick="inner()">
<div id="act"><img src="img/home01.jpg"></div>

<div id="store">
<div id="start">
<img src="img/img01.jpg">
</div>

<div>
<img src="img/img02.jpg"> //wanted to place into "act"
</div>

<div id="end">
<img src="img/img03.jpg">
</div>
</div>

Answer 1

使用nextElementSibling,nextSibling可以是文本节点

function inner(){
    var abc = document.getElementById("start").nextElementSibling;
    document.getElementById("act").innerHTML = abc.innerHTML;
}

小提琴

如果你的目标浏览器不支持nextElementSibling你可以遍历兄弟姐妹并找到第一个元素节点.

function nextElementSibling(element) {
    while (element.nextSibling){
        element = element.nextSibling;
        if (element.nodeType == Node.ELEMENT_NODE){
            return element;
        }
    }
    return undefined;                
}

小提琴