0

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.

4
  • 1
    you have a typo btw: tabTexte Commented May 6, 2017 at 11:28
  • A typo ? What does that mean ? My tab is named 'tabText'. Commented May 6, 2017 at 11:46
  • you had a typo: the code you posted originally had tabTexte[1] Commented May 6, 2017 at 11:52
  • You're right, I modified the name. Commented May 6, 2017 at 11:56

3 Answers 3

1
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]));
Sign up to request clarification or add additional context in comments.

Comments

0

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.

Comments

0

//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
  };
})();

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.