Javascript 使用数组将 li 添加到 ul

Question

我正在为我的 children 开发一个拼写游戏，我想根据他们输入的内容和创建的数组显示一个拼写列表。这是我在 github https://github.com/urock24/myWebSite.git

上的项目的 link

这是有问题的代码，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，但是现在 "plain" javascript 会很棒.

Answer 1

更多的是评论而不是答案，您的基本代码似乎可以很好地处理一些添加的测试数据。以下是一些使代码更简洁的建议：

<script>

// List of words
var spellingList = ['foo','bar','fum'];

function populateSpellList() {

  // Get list once and store reference
  var list = document.getElementById("listSpelling");

  // Declare variables once, near top is good
  var li;

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

    // Create new LI
    li = document.createElement("li");

    // Append the spelling word
    li.appendChild(document.createTextNode(spellingList[i]));

    // Add to list
    list.appendChild(li);
  }
}

// Call the function when the document is ready
window.onload = populateSpellList;
</script>

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

您可以用更少的代码行完成上述操作，但它变得有点难以管理。更少的代码并不总是 "better".

Answer 2

你可以做到这一点。确保你的 JS 放在 HTML 之后，或者放在 window.onload 函数中。

var listEl = document.getElementById('listSpelling');

var spellingList = ['word1', 'word2', 'word3', 'word4'];

var populateList = function(arr){
    var str = '';
    for(var i = 0; i < arr.length; i++){
        str += '<li>' + arr[i] + '</li>';
    }
    return str;
}

listEl.innerHTML = populateList(spellingList);

Fiddle

Answer 3

将您的数组 items 作为参数传递给您的函数
将 Element.insertAdjacentHTML() 与 "beforeend" 参数一起使用
使用Array.prototype.reduce()将数组缩减为字符串HTML

const populateSpellList = (items) => { 
  document.querySelector("#listSpelling").insertAdjacentHTML(
    "beforeend",
    items.reduce((acc, item) => acc += `<li>${item}</li>`, "")
  );
};

populateSpellList(["Word1", "Word2", "Word3"]);

<ul id="listSpelling"><li>test</li></ul>

Answer 4

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

您可以尝试关注

在每个 特定游戏 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;
}

希望这正是您所需要的。

Javascript 使用数组将 li 添加到 ul

Javascript add li to ul using array

javascript

arrays

dom

html-lists