Question

我正在学习Javascript，我想了解一些事情。我尝试使用Javascript构建HTML节点，当我分割指令时我的代码工作，但是当我尝试压缩时不能工作：

我有一个带文字的标签：

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

此代码有效：

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

但是这个没有：

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

你可以给我一些解释吗？

感谢。

Answer 1

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

node.appendChild返回附加的子节点，因此上面的代码将返回textNode（然后附加到 div ，这使得强大的元素无处可去）...

你可能想要这个：

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

Answer 2

appendChild的结果是孩子，而不是父母。换句话说，您的代码等同于

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

因此，strongNode不会添加到文档中。

Answer 3

//创建节点

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

//第二版本

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

//第三版本

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

在Javascript中创建节点

3 个答案: