函数中创建的元素未追加到DOM

Question

我在弄清楚为什么我创建的Element无法在函数中附加到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

Answer 1

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

lvlTitle.innerHTML = message;

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

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

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

Answer 2

您正在用innerHTML覆盖整个容器，但未到达正确的内容文本

查看解决方案，添加新变量lvlContainer，获取.text-container，lvlText获取.text-content

let startText = document.querySelector('.text-content').innerHTML = "Lets Start.";
let lvlTitle = document.querySelector('.text-content');
let lvlContainer = 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";
    lvlContainer.style.color = "#f2eee2";
  } else if (clicks == 2) {
    message = "Test2";
    background.style.backgroundColor = "#f5ce28";
    lvlContainer.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";
    lvlContainer.style.color = "black";
  }
  lvlTitle.innerHTML = message;
};

在jsfiddle中： http : //jsfiddle.net/lucaslimax/7jx194gp/37