如何避免重复键入创建节点和附加节点的方法？

Question

我已经研究了我的问题，但没有提出任何问题。我可能缺少与问题相关的正确流行语......

我在对象内部有一个方法，它创建 p 元素，然后将它们附加到无序列表中，它工作正常，但我无法弄清楚如何通过不重复键入 document.createElement(' p') 或重复输入 node.appendChild('p') 方法。

注意：我省略了一些显示功能的代码部分，但我认为我的问题仍然可以说明这一点。

当我输入我的代码时，我要么得到多个持有 document.createElement('p') 的变量，就像你在 pEl1、pEl2 和 PEl3 中看到的那样。

var totalCompletedTodos = 0,
    totalRemainingTodos = 0,
    todosUl = document.querySelector('ul'),
    todosLi = todosUl.appendChild(document.createElement('li')),
    pEl1 = document.createElement('p'),
    pEl2 = document.createElement('p'),
    pEl3 = document.createElement('p');

todosLi.appendChild(pEl1).textContent = "Toggle All ";
todosLi.appendChild(pEl2).textContent = "Completed: ";
todosLi.appendChild(pEl3).textContent = "Remaining: ";
todosLi.className = 'liInfoBar';
document.querySelector('.liInfoBar > p').className = "toggleAllButton";

或者我最终会不断写出多个 todosLi.appendChild(document.createElement('p')).textContent = "string";

var totalCompletedTodos = 0,
    totalRemainingTodos = 0,
    todosUl = document.querySelector('ul'),
    todosLi = todosUl.appendChild(document.createElement('li'));

todosLi.appendChild(document.createElement('p')).textContent = "Toggle All";
todosLi.appendChild(document.createElement('p')).textContent = "Completed: ";
todosLi.appendChild(document.createElement('p')).textContent = "Remaining: ";
todosLi.className = 'liInfoBar';
document.querySelector('.liInfoBar > p').className = "toggleAllButton";

再次： 我不是在寻求有关功能的帮助，而是寻求有关如何生成可重用代码以使其最小化的帮助。作为一个初学者，我正在努力将时间用于生成最小、干净、可读的代码以及生成功能，这就是我提出这个问题的原因。

对于我正在寻找的东西可能没有答案，唯一的方法就是不断地写出来，但我发现自己在整个剧本中都在这样做，我觉得必须有一种方法。

免责声明：这是我在 Stackoverflow 上的第一篇文章，希望我以一种可以理解的方式表达了我的问题。如果不是，我也会接受有关正确提问的反馈。

谢谢！

Answer 1

为了减少重复，创建一个函数，您可以将父节点、创建的节点的类型以及您需要的任何其他属性传递给该函数。例如：

const append = (
  parent,
  childType,
  otherProps
) => {
  const child = parent.appendChild(document.createElement(childType));
  if (otherProps) Object.assign(child, otherProps);
  return child;
};
const ul = document.querySelector('ul');
const li = append(ul, 'li', { className: 'liInfoBar' });
append(li, 'p', { textContent: 'Toggle All' });
append(li, 'p', { textContent: 'Completed' });
append(li, 'p', { textContent: 'Remaining' });

.liInfoBar {
  background-color: yellow;
}

<ul></ul>

或者您也可以使用执行此类操作的库之一。 （但是你确定你想让ps 成为这样的li 的孩子吗？事实上，它看起来有点奇怪）

Answer 2

当你需要对多条数据做同样的事情时，是时候循环了！

const paragraphs = [
    'Toggle All',
    'Completed: ',
    'Remaining: '
];
paragraphs.forEach((text) => {
    todosLi.appendChild(document.createElement('p')).textContent = text;
});