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>

或者，您也可以使用执行此类操作的库之一。（但是您确定要p成为li的孩子吗？照原样，它看起来有点奇怪）

Answer 2

当您需要对多个数据执行相同的操作时，就该循环了！

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

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

2 个答案: