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

FIDDLE

---

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

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

FIDDLE

Answer 2

您必须确保在遍历节点时跳过空格。

function next(elem) {
    do {
        elem = elem.nextSibling;
    } while (elem && elem.nodeType != 1);
    return elem;                
}

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

您可以在http://jsfiddle.net/CkCR3/看到一个有效的例子。

Answer 3

此行为的原因是div与id＆＃34之间的空格;开始＆＃34;和以下div。所以，nextSibling将是文本内容。您需要两次执行nextSibling：

var abc = document.getElementById("start").nextSibling.nextSibling;

另一种选择是删除两个div之间的空白字符。

Answer 4

有两种方式

首先修复代码

nextSibling.nextSibling.innerHTML

或修复html：删除所有\ n char

<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>​

因为div标签的下一个兄弟是空的textNode（它看不到）

Answer 5

请按以下方式更改您的代码行; 因为每个下一个元素都检查是否存在，然后获取内部html。

function inner（）{

    var abc = document.getElementById("start");
    do {
        abc = abc.nextSibling;
    } while (abc && abc.nodeType != 1);
    document.getElementById("act").innerHTML = abc.innerHTML;     
   return false;
}

Answer 6

我做了一个jsfiddle来演示一种更简单的方法。 你会注意到act div是红色的，而start div是蓝色的。单击按钮时，innerHTML将发生变化。此外，您可能会看到未定义的原因是因为DOM未加载，因此它不知道div存在。下次你应该使用window.onload = inner();在DOM加载后运行该函数。

这是jsfiddle：http://jsfiddle.net/yY9Ag/16/