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

Question

I am having some issues figuring out why my created Element won't append to the DOM within my function.

 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> 

And here is a jsfiddle: Append Li to DOM

Answer 1

This is the line causing you problems:

lvlTitle.innerHTML = message;

When you set the innerHTML, if there are other nodes inside of that element, they are overwritten.

You need to alter your logic to only set the innerHTML in some cases.

I've updated your jsfiddle here: http://jsfiddle.net/jepoqd01/

Answer 2

You are overwriting the entire container with innerHTML and not reaching the correct content text

See solution add new variable lvlContainer with get the .text-container and lvlText get the .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;
};

is in jsfiddle: http://jsfiddle.net/lucaslimax/7jx194gp/37