Creating nodes in Javascript

Question

I'm learning Javascript and I would like to understand something. I tried to build HTML nodes using Javascript and my code works when I split instructions but not when I try to compress :

I have a tab with text :

var tabText = [
    'The ',
    'Moon',
];

This code works :

var s1 = document.createElement('strong');
s1.appendChild(document.createTextNode(tabText[1]));
div.appendChild(s1);

But this one doesn't :

div.appendChild(document.createElement('strong').appendChild(document.createTextNode(tabText[1])));

Could you give me some explanations ?

Thanks.

Answer 1

//Create Node

(function () {
  function createTodoNode(todo) {
    const node = document.createElement("li");

    node.classList.add("todo-item");

    node.innerHTML = `
      <button class="done-state">
        <div class="done-state-filler"></div>
      </button>
      <div class="todo-name"></div>
      <button class="delete-todo">✖</button>
    `;

    node.querySelector(".todo-name").textContent = todo.value;

    const doneButton = node.querySelector("button.done-state");
    const deleteButton = node.querySelector("button.delete-todo");

    node.setAttribute("data-completed", todo.isComplete);

    doneButton.addEventListener("click", () => {
      const currentlyCompleted = JSON.parse(
        node.getAttribute("data-completed") || "false"
      );
      node.setAttribute("data-completed", !currentlyCompleted);

      todo.isComplete = !currentlyCompleted;
      todoService.updateTodo(todo);
    });

    deleteButton.addEventListener("click", () => {
      node.parentNode.removeChild(node);
      todoService.removeTodo(todo.id);
    });

    return node;
  }

  window.todoView = {
    createTodoNode,
  };
})();

// Second Variation

<button onclick="create()">Aufgabe erstellen</button>
<ul class="items">
    Meine Aufgabe:

</ul>

function create(){
    let list = document.querySelector(".items");
    let node = document.createElement("li");
    node.classList.add("todo-item");
    node.style ="color: orangered";
    node.innerHTML =  '<div class= "todo-item"></div>';
    
    list.appendChild(node);
    node.querySelector(".todo-item").textContent = "Eine erste Aufgabe";
    console.log(node);
}

// Third Variation

(function() {
  function createTaskNode(param) {
    let categorie = document.querySelector("#" + param.key);
    let newTaskDiv = document.createElement("div");

    newTaskDiv.classList.add("task");
    newTaskDiv.setAttribute("id", param.id);
    newTaskDiv.setAttribute("data-assigned", param.isComplete);

    if (newTaskDiv.getAttribute("data-assigned") == "undefined") {
      newTaskDiv.setAttribute("data-assigned", false);
    }

    newTaskDiv.innerHTML = `
                        <div class="task-name">
                            <div class="task-value"></div>
                            <div class="data-assigned-button"></div>
                        </div>
                        <div class="button-div">
                             <button class="prev-button">⬅</button>
                             <button class="delete-button">âŒ</button>
                            <button class="next-button">âž¡</button>
                         </div>`;

    newTaskDiv.setAttribute("task-value", param.value);
    categorie.appendChild(newTaskDiv);
  }

  window.taskViewService = {
    createTaskNode
  };
})();

Answer 2

The result of appendChild is the child, not the parent. In other words, your code is equivalent to

var strongNode = document.createElement('strong');
var textNode = document.createTextNode(tabText[1]));
strongNode.appendChild(textNode); // returns textNode
div.appendChild(textNode);

Therefore, strongNode will not be added to the document.

Answer 3

document.createElement('strong').appendChild(document.createTextNode(tabTexte[1]))

node.appendChild returns the appended child node , therefore the upper code will return the textNode(wich is then appended to to div wich makes the strong elem go to nowhere)...

You may want this:

div.appendChild(document.createElement('strong')).appendChild(document.createTextNode(tabText[1]));