在 Javascript 中创建节点答案

【问题标题】：Creating nodes in Javascript在 Javascript 中创建节点
【发布时间】：2017-10-04 19:35:24
【问题描述】：

我正在学习 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])));

你能给我一些解释吗？

谢谢。

【问题讨论】：

你有一个错字顺便说一句：tabTexte
错字？那是什么意思？我的标签名为“tabText”。
你有一个错字：你最初发布的代码有tabTexte[1]
你说得对，我修改了名字。

标签： javascript html nodes

【解决方案1】：

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

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

你可能想要这个：

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

【讨论】：

【解决方案2】：

appendChild 的结果是孩子，而不是父母。换句话说，你的代码相当于

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

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

【讨论】：

【解决方案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
  };
})();

【讨论】：