如何在 JavaScript 中的 for 循环内创建元素

Question

注意：请查看代码结构。您不能将节点附加到数组，就像您不能从节点中 .pop 或 .remove 一个项目一样。

我正在尝试在 for 循环或 forEach 中创建一个元素（两者都试过了）。

我正在获取值，但它们在一个数组中。

因此它们嵌套在 ul 中，但没有 li 标签。

我尝试添加 li 标签，但无法实现。

这是代码笔：https://codepen.io/Aurelian/pen/opaxqx?editors=1010

代码如下：

    // Get te location
// Make the : blink

//var location = document.querySelector('.clock-location');

function abbrev(a,b) {
  return a.substr(0,b);
}

function currentDay() {
  // Go to array
  // If today day (number) matched one of the array
  // To this add active
}

function displayTime() {

  var clockTime = document.querySelector('.clock-time');
  var clockDay = document.querySelector('.clock-day');
  var clockWeekdays = document.querySelector('.clock-weekdays');

  var date = new Date();

  var weekday = new Array(7);
  weekday[0] = "Monday";
  weekday[1] = "Tuesday";
  weekday[2] = "Wednesday";
  weekday[3] = "Thursday";
  weekday[4] = "Friday";
  weekday[5] = "Saturday";
  weekday[6] =  "Sunday";

  var singleDay = [];

  // weekday.forEach(function(day){
  //  singleDay.push(abbrev(day,3));
  // });

  for (var i = 0; i < weekday.length; i++) {
    var day = weekday[i];
    var li = document.createElement('li').innerHTML = day;
    singleDay.push(abbrev(li,3));
  }

  // Mechanics
  var todayDay = weekday[date.getDay()];

  // Display
  clockDay.innerHTML = abbrev(todayDay,3);
  clockWeekdays.innerHTML = singleDay;

  setTimeout(startTime, 1000);
}



displayTime();

// Get the time

//Loop Throw weekdays - show 3 letters

Answer 1

在你的 for 循环中，删除将 li 推入数组的最后一行，而是使用 appendChild() 将新创建的 li 元素添加到

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

Answer 2

您需要正确创建元素，然后使用 appendChild:

for (var i = 0; i < weekday.length; i++) {
    var day = weekday[i];
    var li = document.createElement('li');
    li.innerHTML = abbrev(day,3);
    clockWeekdays.appendChild(li);
}

Answer 3

我对你的循环做了一些改动（删除了 push 步骤，每次循环迭代都会添加新的子项）：

for (var i = 0; i < weekday.length; i++) {
  var day = weekday[i];
  var li = document.createElement('li');
  li.innerHTML = abbrev(day,3);
  clockWeekdays.appendChild(li);
}

并且不要忘记 comment/remove 这一行：

clockWeekdays.innerHTML = singleDay;

否则您的 innerHTML 将被覆盖。这是工作代码笔：

https://codepen.io/commercialsuicide/pen/WdaojM?editors=1010

如何在 JavaScript 中的 for 循环内创建元素

How to create an element inside a for loop in JavaScript

javascript

dom

clock