Javascript使用数组将li添加到ul

debugcn 发表于 Dev

urock24

我正在为我的孩子们进行拼写游戏，我想根据他们输入的内容和创建的数组显示一个拼写列表。这是我在github https://github.com/urock24/myWebSite.git上的项目的链接

这是有问题的代码，首先是javascript

function populateSpellList() {      
    // for loop should run through spelling list array and create list items in "listSpelling"

    for (var i = 0; i < spellingList.length; i++ ) {
        // create a new li
        var newLI = document.createElement("li");
        var indSpellingWord = spellingList[i];

        // grab the spelling list item 
        var newContent = document.createTextNode(indSpellingWord);

        // add the spelling list item to the li
        newLI.appendChild(newContent);

        // get the unordered list and add the new li
        var displaySpellList = document.getElementById("listSpelling");     

        displaySpellList.appendChild(newLI);
    }   
}

和HTML

<div id = "theSpellingList">

            <h3>The Spelling List</h3>
            <ul id = "listSpelling">
               <li>test </li>
            </ul>

        </div>

在函数的每一行（最后一行除外）之后，我都可以弹出警报，它似乎只弹出一次。但是无论发生什么情况，它都不会在该列表中显示任何列表项。

我在这里看到了很多jquery示例，因此我肯定会追求学习jquery，但是就目前而言，“纯文本” javascript会很棒。

奥卡普

据我所知，您正在尝试将元素插入通过iFrame嵌入的文档中。但是您不能那么简单地做到这一点。事实是，当您document.getElementById从父窗口（而非iframe）调用时，它将尝试在父窗口中查找元素。但是iFrame是一个单独的窗口。

您可以尝试关注。

在每个特定的游戏html文件中：

<body>
  <!-- SOME CONTENT HERE -->

  <!-- RIGHT BEFORE `BODY` CLOSE -->
  <script>
    // This will run your code once document is loaded.
    window.onload = function () {
        // run the createName function
        createName();
        // run the createList function 
        createList();
        //play game
        playGame(target);
    };
  </script>
</body>

在learningGames.js中：

function populateSpellList() {  

    // for loop should run through spelling list array and create list items in "listSpelling"
    var i;
    for (i = 0; i < spellingList.length; i++ ) {

        var newLI = document.createElement("li"), // create a new li
            displaySpellList = document.getElementById("listSpelling"), // cache the unordered list
            newContent = document.createTextNode(spellingList[i]); // grab the spelling list item

        // add the spelling list item to the li
        newLI.appendChild(newContent);

        displaySpellList.appendChild(newLI);
    }
}

function gameWindow(target) {
    // set the iframe html to the target html 
    document.getElementById('game_frame').src = target;
}

希望这正是您所需要的。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。