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

我已经研究了我的问题，没有提出任何东西。我可能缺少与这个问题相关的恰当的流行语

我在一个对象内部有一个方法，该方法创建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”

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

我想要的东西可能没有答案，唯一的办法就是不断地写出来，但我发现自己在整个剧本中都做了很多，我觉得一定有办法

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

---

谢谢大家!

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

const append=(
父母亲
儿童型，
其他道具
) => {
const child=parent.appendChild（document.createElement（childType））；
if（otherProps）Object.assign（child，otherProps）；
返回儿童；
};
const ul=document.querySelector（'ul'）；
const li=append（ul，'li'，{className:'liInfoBar'}）；
追加（li，'p'，{textContent:'Toggle All'}）；
追加（li，'p'，{textContent:'Completed'}）；
追加（li，'p'，{textContent:'Remaining'}）
.liInfoBar{
背景颜色：黄色；
}
当您需要对多个数据段执行相同的操作时，是进行循环的时候了

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

我会推荐一些方法，例如
[“Toggle All”，“Completed:”，“Remaining:”].map（（textContent）=>Object.assign（document.createElement（“p”），{textContent}））
用三个
元素及其各自的文本创建一个数组。现在看起来它应该类似于
for（让str of[“Toggle All”，“已完成：”，“剩余：”）{todosLi.appendChild（document.CreateElement（'p'））.textContent=str}
Ok这很有意义，所以这几乎就像制作一个像JQuery这样的个性化库一样？我知道有一些库，但我在学习javascript的基础知识时尽量避免使用它们。而且我认为我应该添加跨距，而不是你提到的p。我有多个项附加到一个l中我认为跨度可能更有意义。谢谢你的帮助！是的，有点像那样。但是如果你只是在学习，编写自己的函数来完成类似的事情绝对没有错，这样你的代码看起来更抽象和简洁，这样你就可以掌握在没有库的情况下如何工作。
const paragraphs = [
    'Toggle All',
    'Completed: ',
    'Remaining: '
];
paragraphs.forEach((text) => {
    todosLi.appendChild(document.createElement('p')).textContent = text;
});