此nodeValue替换代码有什么问题？

Question

I am learning basic js operation on DOM, and it works fine with the first part of the code, which completes attributes replacing function. 我正在学习有关DOM的基本js操作，并且可以与代码的第一部分一起正常工作，从而完成了属性替换功能。

Then it doesn't work with the second part code, which needs to replace the null value of the childNode.nodeValue of the "p" element. 然后，它不适用于第二部分代码，后者需要替换“ p”元素的childNode.nodeValue的空值。

I checked lots of times in the past 2 hrs, and the whole structure is also the same with the code in the book, but it just won't work. 在过去的2小时中，我检查了很多次，整个结构与书中的代码也相同，但无法正常工作。

I also checked the MDN about the node related entries, but also failed to get what is going on here. 我还检查了有关节点相关条目的MDN，但也无法了解此处的情况。

gallery.js 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;

}

Below is the HTML file 以下是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

The problem is that #funnyWords has no content: 问题是#funnyWords没有内容：

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

Therefore, fun.childNodes[0] is undefined. 因此， fun.childNodes[0]未定义。

You can create a new text node if necessary: 您可以根据需要创建一个新的文本节点：

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

Alternatively, new browsers support textContent : 另外，新的浏览器支持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替换代码有什么问题？

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-03-30 18:07:22

解决方案2
1 2015-03-30 18:14:37

此nodeValue替换代码有什么问题？

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-03-30 18:07:22

解决方案2 1 2015-03-30 18:14:37

解决方案1
2 已采纳 2015-03-30 18:07:22

解决方案2
1 2015-03-30 18:14:37