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

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";

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

可能没有我正在寻找的答案，唯一的方法是不断地把它写出来，但我发现自己在整个剧本中做了很多，我觉得必须有一个方法。

免责声明：这是我在 Whosebug 上的第一个 post 希望我的问题措辞易于理解。如果没有，我也会接受关于正确提问的主题的反馈。

谢谢！

Answer 1

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

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 的 children 吗？实际上，它看起来有点奇怪）

Answer 2

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

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

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

How do I avoid repeatedly typing methods that create nodes and append nodes?

javascript

readability