javascript to change innerHTML

javascript to change innerHTML

本文关键字：innerHTML change to javascript      更新时间：2023-12-29

我想使用另一个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>

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

FIDDLE

遍历节点时，必须确保跳过空白。

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/.

导致这种行为的原因是id为"start"的div和下面的div之间存在空白。因此，nextSibling将是文本内容。你需要做两次下一次扫描：

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

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

请根据以下内容更改您的代码行；因为每个下一个元素都要检查是否存在，所以获取内部html。

函数inner（）｛

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

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

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

有双向

首先修复代码

nextSibling.nextSibling.innerHTML

或修复html:删除所有字符

<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（它看不到）

相关文章：