时间戳

首页 > 解决方案 > 在未附加到 DOM 的函数中创建的元素

javascript - 在未附加到 DOM 的函数中创建的元素

问题描述

我在弄清楚为什么我创建的元素不会附加到我的函数中的 DOM 时遇到了一些问题。

let startText = document.querySelector('.text-container').innerHTML = "Lets Start.";
let lvlTitle = document.querySelector('.text-container');
let background = document.querySelector('.full-page');
lvlTitle.addEventListener('click', countChangeBackground);
var clicks = 0;

function countChangeBackground() {
  clicks += 1;
  var message = "";
  if (clicks == 1) {
    message = "Test";
    background.style.backgroundColor = "#f81884";
    lvlTitle.style.color = "#f2eee2";
  } else if (clicks == 2) {
    message = "Test2";
    background.style.backgroundColor = "#f5ce28";
    lvlTitle.style.color = "black";
  } else if (clicks == 3) {
    message = "Add Li to ul";

    var ul = document.querySelector('.text-container');
    var li = document.createElement('li');

    li.className = 'text-content';
    li.appendChild(document.createTextNode('New Text'));
    ul.appendChild(li);
    console.log(li);
  } else {
    message = startText;
    background.style.backgroundColor = "#f2eee2";
    lvlTitle.style.color = "black";
  }
  lvlTitle.innerHTML = message;
};
<div class="full-page">
  <div class="click-container">
    <ul class="text-container">
    </ul>
  </div>
</div>

这是一个 jsfiddle： 将 Li 添加到 DOM

标签： javascripthtml

解决方案

这是导致您出现问题的行：

lvlTitle.innerHTML = message;

当您设置 innerHTML 时，如果该元素内还有其他节点，它们将被覆盖。

在某些情况下，您需要更改逻辑以仅设置 innerHTML。

我在这里更新了你的 jsfiddle：http: //jsfiddle.net/jepoqd01/

推荐阅读