这个 nodeValue 替换代码有什么问题？

Question

正在学习DOM上的基本js操作，配合第一部分代码，完成属性替换功能，效果很好。

那么第二部分代码就不行了，需要替换"p"元素的childNode.nodeValue的空值

这2个小时查了很多次，整个结构也和书上的代码一样，就是不行

我也查看了 MDN 关于节点相关的条目，但也没有得到这里发生了什么。

gallery.js

function showpics(indexs){

    var linky = indexs.getAttribute("href");
    var holdy = document.getElementById("holder");
    holdy.setAttribute("src",linky);

    var texty = indexs.getAttribute("title");
    var fun = document.getElementById("funnyWords");
    fun.childNodes[0].nodeValue = texty;

}

下面是 HTML 文件

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8" http-equiv="IE=Edge,chrome=1">
        <title>YTimes</title>
        <script type="text/javascript" src="gallery.js"></script>
    </head>

    <body>

        <h1>Our Story</h1>

        <section>
            <ul>
                <li><a href="../../Games/WOW/Screenshots/WoWScrnShot_030815_232128.jpg" title = "F" onclick="showpics(this); return false;">F</a></li>
                <li><a href="../../Games/WOW/Screenshots/WoWScrnShot_041214_150925.jpg" title = "2.0 Version" onclick="showpics(this); return false;">2.0</a></li>
                <li><a href="../../Games/WOW/Screenshots/WoWScrnShot_050214_165318.jpg" title = "Riverrun" onclick="showpics(this); return false;">Riverrun</a></li>
            </ul>
        </section>

        <section>
            <p id="funnyWords"></p>
            <span>
                <img src="" alt="" id="holder">
            </span>
        </section>

    </body>

</html>

Answer 1

问题是#funnyWords没有内容：

<p id="funnyWords"></p>

因此，fun.childNodes[0] 未定义。

如有必要，您可以创建一个新的文本节点：

if(fun.childNodes.length)
    fun.childNodes[0].nodeValue = texty;
else
    fun.appendChild(document.createTextNode(texty));

或者，新的浏览器支持 textContent:

fun.textContent = texty;

Answer 2

<head>
    <meta charset="UTF-8" http-equiv="IE=Edge,chrome=1">
    <title>YTimes</title>
    <script type="text/javascript" src="gallery.js"></script>
</head>

<body>

<h1>Our Story</h1>

    <section>
        <ul>
            <li><a href="../../Games/WOW/Screenshots/WoWScrnShot_030815_232128.jpg" title = "F" onclick="showpics(this); return false;">F</a></li>
            <li><a href="../../Games/WOW/Screenshots/WoWScrnShot_041214_150925.jpg" title = "2.0 Version" onclick="showpics(this); return false;">2.0</a></li>
            <li><a href="../../Games/WOW/Screenshots/WoWScrnShot_050214_165318.jpg" title = "Riverrun" onclick="showpics(this); return false;">Riverrun</a></li>
        </ul>
    </section>

    <section>
        <p id="funnyWords">
         <div class="childnode">
         </div>
        </p>
        <span>
            <img src="" alt="" id="holder">
        </span>
    </section>

</body>

这个 nodeValue 替换代码有什么问题？

What is wrong with this nodeValue replacing code?

javascript

dom