CreateElement 然后写innerHTML答案

【问题标题】：CreateElement and then write innerHTMLCreateElement 然后写innerHTML
【发布时间】：2018-08-21 07:52:09
【问题描述】：

所以我这两天一直在寻找答案。有人会如何创建一个元素，然后用 innerHTML 将其写入 HTML？

function dataPull() {
      // Connects to my server from which it pulls JSON data containing start,end,summary,organizer of the event.
      fetch("http://localhost:8000/events").then((resp) => resp.json()).then(render)
    };

    function eventFilter(event) {
      eventTime = new Date(event);
      eventHours = eventTime.getHours();
      eventMinutes = eventTime.getMinutes();
      if (eventMinutes < 10) {
        eventMinutes = "0" + eventMinutes
      }
      return event = eventHours + ":" + eventMinutes;
    };

    function eventMap(eventBooked) {
      return `
        <div class="event">
            <div class="eventTime">${eventFilter(eventBooked.start)}
                <p class="timep">${eventFilter(eventBooked.end)}</p>
            </div>
            <div class="eventInfo">
                <h1 class="eventSummary"> ${eventBooked.summary}</h1>
                <p class="eventOrganizer">${eventBooked.organizer}</p>
            </div>
        </div>`;
    };

    function render(data) {
      data.events.sort(function(a, b) {
        return new Date(a.start).getTime() - new Date(b.start).getTime();
      });

      // Delete outdated events.
      let eventsNotOutdated = data.events.filter((item) => {
        let endTime = new Date(item.end);
        if (Date.now() < endTime) {
          return item;
        }
      });

      // Create a new variable for event currently in progress.
      let eventInProgress = eventsNotOutdated.filter((item) => {
        let startTime = new Date(item.start);
        if (Date.now() > startTime) {
          return item;
        }
      });

      // Same as eventsNotOutdated but without the event in progress.
      let filteredEventsNotOutdated = eventsNotOutdated.filter((item) => {
        let startTime = new Date(item.start);
        if (Date.now() < startTime) {
          return item;
        }
      });

      if (eventInProgress.length > 0 && filteredEventsNotOutdated.length >= 1) {
        return document.getElementById("eventList").innerHTML =
          `<div>
            <h1 class="announcerBig">In progress</h1>
            <div class="eventBig">
              <div class="eventTimeBig">${eventFilter(eventInProgress[0].start)}
              <p class=timep>${eventFilter(eventInProgress[0].end)}</p>
            </div>
            <div class="eventInfoBig">
              <h1 class="eventSummaryBig">${eventInProgress[0].summary}</h1>
              <p class="eventOrganizerBig">${eventInProgress[0].organizer}</p>
            </div>
           </div>
            </div>
            <div class=eventsInProgress>
            <h1 class="announcer">Later</h1>${filteredEventsNotOutdated.map(eventMap).join("")}
            </div>`;
      } else if (eventInProgress.length > 0 && filteredEventsNotOutdated.length < 1) {
        return doc.getElementById("eventList").innerHTML =
          `<div>
            <h1 class="announcerBig">In progress</h1>
            <div class="eventBig">
              <div class="eventTimeBig">${eventFilter(eventInProgress[0].start)}
                <p class=timep>${eventFilter(eventInProgress[0].end)}</p>
              </div>
              <div class="eventInfoBig">
                <h1 class="eventSummaryBig">${eventInProgress[0].summary}</h1>
                <p class="eventOrganizerBig">${eventInProgress[0].organizer}</p>
              </div>
           </div>`
      } else if (eventInProgress.length === 0 && filteredEventsNotOutdated.length > 0) {
        return document.getElementById("eventList").innerHTML =
          `<h1 class="announcerBig">Coming up next</h1>${filteredEventsNotOutdated.map(eventMap).join("")}`;
      } else {
        document.getElementById("eventList").innerHTML =
          `<p class="noevent">No meetings scheduled.</p><p class="schedule">Schedule meetings on google calendars.`;
      };
    };

    setTimeout(dataPull);
    setInterval(dataPull, 10000);

<html>

<head>
</head>

<body id='body'>
  <div id='eventList' class="eventList"></div>
  <script src="example.js"></script>
</body>

</html>

这是我正在使用的代码的快速演示。如您所见，我没有使用任何 document.createElement 方法，但是如果我使用 createElement 代替反引号会怎样。我试过了，但问题是，每 10 秒（由于间隔）它调用函数并不断写入相同的元素。注意：需要间隔，因为我提取的数据会不断更新，因此我需要在显示器上不断更新。

现在我的问题是：是否可以使用 innerHTML 方法在 HTML 中编写带有附加子项的创建元素？

【问题讨论】：

是的，您可以使用 innerHTML 在字符串中附加子项
我不明白这个问题？您已经使用 .innerHTML 添加新元素 - 这似乎有效，因为您提到当您不使用模板文字时它无法工作 O.o
如果我理解你没有去node.appendChild，因为它会一次又一次地创建相同的元素，解决方案是使用node.removeChild，如果你保留孩子，你可以这样做child.parentNode.removeChild(child)
@Andreas 模板文字工作正常，但有没有办法只使用 createElement.然后在创建元素后每次写入元素innerHTML，这样它总是会覆盖以前的数据。
@jonatjano 是的，但我想这样做，该函数会在 HTML 中写入我将使用 createElement 创建的所有元素，然后用新元素覆盖它们。不添加它们。 node.removeChild 可以工作，但没有要删除的孩子，因为它们都不会被创建。

标签： javascript html dom

【解决方案1】：

您的 sn-ps 使用 document.createElement，它应该像您的版本一样工作（如果在 IE 上，您可能需要将 textContent 替换为 innerText）

function dataPull() {
  // Connects to my server from which it pulls JSON data containing start,end,summary,organizer of the event.
  fetch("http://localhost:8000/events").then((resp) => resp.json()).then(render)
};

function eventFilter(event) {
  eventTime = new Date(event);
  eventHours = eventTime.getHours();
  eventMinutes = eventTime.getMinutes();
  if (eventMinutes < 10) {
    eventMinutes = "0" + eventMinutes
  }
  return eventHours + ":" + eventMinutes;
};

function eventMap(eventBooked, classSuffix = "") {
  event = document.createElement("div")
  event.classList.add("event")

  // create time
  time = document.createElement("div")
  time.classList.add("eventTime" + classSuffix)
  time.textContent = eventFilter(eventBooked.start)
  // create timep
  timep = document.createElement("p")
  timep.classList.add("timep")
  timep.textContent = eventFilter(eventBooked.end)

  // create info
  info = document.createElement("div")
  info.classList.add(eventTime)
  // create summary
  summary = document.createElement("h1")
  summary.classList.add("eventSummary" + classSuffix)
  summary.textContent = eventBooked.summary
  // create organizer
  organizer = document.createElement("p")
  organizer.classList.add("eventOrganizer" + classSuffix)
  organizer.textContent = eventBooked.organizer

  // append everything
  event.appendChild(time)
  time.appendChild(timep)

  event.appendChild(info)
  info.appendChild(summary)
  info.appendChild(organizer)

  return event
};

function render(data) {
  data.events.sort(function(a, b) {
    return new Date(a.start).getTime() - new Date(b.start).getTime();
  });

  // Delete outdated events.
  let eventsNotOutdated = data.events.filter((item) => {
    let endTime = new Date(item.end);
    if (Date.now() < endTime) {
      return item;
    }
  });

  // Create a new variable for event currently in progress.
  let eventInProgress = eventsNotOutdated.filter((item) => {
    let startTime = new Date(item.start);
    if (Date.now() > startTime) {
      return item;
    }
  });

  // Same as eventsNotOutdated but without the event in progress.
  let filteredEventsNotOutdated = eventsNotOutdated.filter((item) => {
    let startTime = new Date(item.start);
    if (Date.now() < startTime) {
      return item;
    }
  });

  let eventList = document.getElementById("eventList");
  for(let child of eventList.children) {eventList.removeChild(child)}

  if (eventInProgress.length > 0) {
    div = document.createElement("div")
    
    announcerBig = document.createElement("h1")
    announcerBig.classList.add("announcerBig")
    announcerBig.textContent = "In progress"
    
    eventBig = eventMap(eventInProgress[0], "Big")
    
    div.appendChild(announcerBig)
    div.appendChild(eventBig)
    
    eventList.appendChild(div)
    
    if (filteredEventsNotOutdated.length) {
      inProgress = document.createElement("div")
      
      announcer = document.createElement("h1")
      announcer.classList.add("announcer")
      announcer.textContent = "Later"
      
      inProgress.appendChild(announcer)
      
      filteredEventsNotOutdated.forEach(ev => {eventList.appendChild(eventMap(ev))})
      
      eventList.appendChild(inProgress)
    }
    
  } else if (eventInProgress.length === 0 && filteredEventsNotOutdated.length > 0) {
      announcerBig = document.createElement("h1")
      announcerBig.classList.add("announcerBig")
      announcerBig.textContent = "Coming up next"
      
      eventList.appendChild(announcerBig)
      
      filteredEventsNotOutdated.forEach(ev => {eventList.appendChild(eventMap(ev))})
  } else {      
      noevent = document.createElement("p")
      noevent.classList.add("noevent")
      noevent.textContent = "No meetings scheduled."
      
      schedule = document.createElement("p")
      schedule.classList.add("schedule")
      schedule.textContent = "Schedule meetings on google calendars."
      
      eventList.appendChild(noevent)
      eventList.appendChild(schedule)
  };

  return eventList
};

setTimeout(dataPull);
setInterval(dataPull, 10000);

<html>

<head>
</head>

<body id='body'>
  <div id='eventList' class="eventList"></div>
  <script src="example.js"></script>
</body>

</html>

希望我没有忘记一部分：p

它可以很容易地改进，例如：

在事件未过时时保留事件 div（仅删除过时的子项/仅创建新子项）
查看 HTML/CSS 以在没有正在进行的事件/根本没有事件时保持相同的 squeletton

EDIT：行的解释

filteredEventsNotOutdated.forEach(ev => {eventList.appendChild(eventMap(ev))})

可以发展成

for (let ev of filteredEventsNotOutdated) {
    child = eventMap(ev)
    eventList.appendChild(child)
})

查看for...of的文档

【讨论】：

我非常感谢你所做的。但是，代码没有按应有的方式运行。它列出了 3 个正在进行的事件，并且在以后的 div 中没有。但我可以自己做。你给了我一个很好的基础。甚至不好，完美！你能解释一下你在添加 for 函数的那一行做了什么吗？
@DavidB 你是说这个filteredEventsNotOutdated.forEach(ev => {eventList.appendChild(eventMap(ev))})？
for(let child of eventList.children) {eventList.removeChild(child)} 我真的不明白这是做什么的，所以我把它改成了：let removeChilds = function (node) { let last; while (last = node.lastChild) node.removeChild(last); }; removeChilds(eventList);
@DavidB 我没想过使用while，但结果仍然是每个孩子都被删除
嗯...不过对我不起作用。无论如何，使代码工作，关于如何将 createElement 类缩短为函数的任何提示，例如function el(tag, class) {document.createElement(tag).className(class)} 然后我会在创建元素时调用该函数：let div = el("div","divClass")