在Javascript中创建节点

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

你能给我解释一下吗

谢谢

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

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

您可能需要：

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

结果是子对象，而不是父对象。换句话说，您的代码相当于

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

因此，
strong节点
将不会添加到文档中。
//创建节点

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

（函数（）{
函数createTodoNode（todo）{
const节点=document.createElement（“li”）；
node.classList.add（“待办事项”）；
node.innerHTML=`
✖
`;
node.querySelector（“.todo name”）.textContent=todo.value；
const doneButton=node.querySelector（“button.done状态”）；
const deleteButton=node.querySelector（“button.delete todo”）；
node.setAttribute（“数据已完成”，todo.isComplete）；
doneButton.addEventListener（“单击”，（）=>{
const currentlyCompleted=JSON.parse(
node.getAttribute（“数据已完成”）| |“false”
);
node.setAttribute（“数据已完成”，！currentlyCompleted）；
todo.isComplete=！currentlyCompleted；
todoService.updateTodo（todo）；
});
deleteButton.addEventListener（“单击”，（）=>{
node.parentNode.removeChild（节点）；
todoService.removeTodo（todo.id）；
});
返回节点；
}
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
  };
})();

Aufgabe-erstellen

梅恩·奥法加贝：

函数create（）{
let list=document.querySelector（“.items”）；
让节点=document.createElement（“li”）；
node.classList.add（“待办事项”）；
node.style=“颜色：橙色”；
node.innerHTML=''；
list.appendChild（节点）；
node.querySelector（“.todo项”）.textContent=“Eine erste Aufgabe”；
console.log（节点）；
}

//第三种变体

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

（函数（）{
函数createTaskNode（参数）{
让categorie=document.querySelector（“#”+param.key）；
让newTaskDiv=document.createElement（“div”）；
newTaskDiv.classList.add（“任务”）；
newTaskDiv.setAttribute（“id”，参数id）；
newTaskDiv.setAttribute（“分配的数据”，参数isComplete）；
if（newTaskDiv.getAttribute（“分配的数据”）=“未定义”）{
newTaskDiv.setAttribute（“数据分配”，false）；
}
newTaskDiv.innerHTML=`
⬅
âŒ
âž¡
`;
newTaskDiv.setAttribute（“任务值”，参数值）；
附属物儿童（newTaskDiv）；
}
window.taskViewService={
createTaskNode
};
})();
你有一个打字错误顺便说一句：
tabTexte
一个打字错误？这是什么意思？我的标签名为“tabText”。您有一个输入错误：您最初发布的代码是
tabTexte[1]
您说得对，我修改了名称。