如何使用代码更短的Javascript创建多个段落？

我想用Javascript创建多个段落，每个段落有两个inputfield。 我想知道，是否有一种方法可以让代码更短但结果相同

它应该具有与此相同的结果，但代码较短：

var para1=document.createElementp； var i1=document.createElementinput； var i2=document.createElementinput； para1.1； para1.2； var元素=document.getElementByIddiv1； 元素1； var para2=document.createElementp； var i3=document.createElementinput； var i4=document.createElementinput； para2.3； para2.4； var元素=document.getElementByIddiv1； 元素2； var para3=document.createElementp； //等等。

---

将代码包装到函数中

function createPara() {
  var para1 = document.createElement("p");
  var i1 = document.createElement("input");
  var i2 = document.createElement("input");
  para1.appendChild(i1);
  para1.appendChild(i2);
  var element = document.getElementById("div1");
  element.appendChild(para1);
}

调用函数n次

createPara()
createPara()

---

此外，您还可以传递诸如class、id等参数。

将代码包装到函数中

function createPara() {
  var para1 = document.createElement("p");
  var i1 = document.createElement("input");
  var i2 = document.createElement("input");
  para1.appendChild(i1);
  para1.appendChild(i2);
  var element = document.getElementById("div1");
  element.appendChild(para1);
}

调用函数n次

createPara()
createPara()

---

此外，您还可以传递诸如class、id等参数。

按照您编写的方式，您可以多次执行完全相同的代码。为什么不把它放在函数中呢

createPara();
createPara();
createPara();
//etc.

function createPara() { 
  var para2 = document.createElement("p");
  var i3 = document.createElement("input");
  var i4 = document.createElement("input");
  para2.appendChild(i3);
  para2.appendChild(i4);
  var element = document.getElementById("div1");
  element.appendChild(para2);
}

---

按照您编写的方式，您多次执行完全相同的代码。为什么不把它放在函数中呢

createPara();
createPara();
createPara();
//etc.

function createPara() { 
  var para2 = document.createElement("p");
  var i3 = document.createElement("input");
  var i4 = document.createElement("input");
  para2.appendChild(i3);
  para2.appendChild(i4);
  var element = document.getElementById("div1");
  element.appendChild(para2);
}

---

创建文档片段并将其附加到DIV，而不是创建单个元素

在当前设置中，每次附加任何元素时，HTML元素都会回流

使用DocumentFragment，您可以保存多个回流，因为它在连接时只回流一次

---

有关信息，请参阅。

创建文档片段并将其附加到DIV，而不是创建单个元素

在当前设置中，每次附加任何元素时，HTML元素都会回流

使用DocumentFragment，您可以保存多个回流，因为它在连接时只回流一次

---

请参考信息。

除了使用for循环，我想不出任何其他解决方案除了使用for循环，我想不出任何其他解决方案将代码包装到函数中，并为其指定段落编号：

    function createPara(n) {
      let parentDiv = document.getElementById("div1")

          for(let i =0; i<n; i++){

             let para = document.createElement("p");
             let i1 = document.createElement("input");
             let i2 = document.createElement("input");
             para1.appendChild(i1);
             para1.appendChild(i2);
             parentDiv.appendChild(para);
         }
      }
   }

---

您还可以为它指定输入数

将代码包装到函数中，并为它指定段落数：

    function createPara(n) {
      let parentDiv = document.getElementById("div1")

          for(let i =0; i<n; i++){

             let para = document.createElement("p");
             let i1 = document.createElement("input");
             let i2 = document.createElement("input");
             para1.appendChild(i1);
             para1.appendChild(i2);
             parentDiv.appendChild(para);
         }
      }
   }

---

你也可以给它输入的数量

我想我会为更一般的情况做些什么，但可能有点失控了；无论如何：

const new_children=[ {标记：'p'，子项：[ {tag:'input'}， {tag:'input'}， ] }, ]; 常量元素，用于定义=def=>{ 常量元素=document.createElementdef.tag； ifdef.children&&def.children.length>0 将_children_追加到_element，def.children； 返回元素； }; const append_to_element=parent=>child=>parent.appendChildchild； const append_children_to_ele=parent，children=> 儿童 .mapelement_用于_def .forEachappend_to_elementparent； const three_new_children=[1,2,3]。reduceAC=>acc.concatnew_children，[]； 将\u children\u追加到\u eledocument.getElementByIddiv1，三个\u新的\u子元素；

---

我原以为我会为更一般的情况做点什么，但可能有点得意忘形；无论如何：

const new_children=[ {标记：'p'，子项：[ {tag:'input'}， {tag:'input'}， ] }, ]; 常量元素，用于定义=def=>{ 常量元素=document.createElementdef.tag； ifdef.children&&def.children.length>0 将_children_追加到_element，def.children； 返回元素； }; const append_to_element=parent=>child=>parent.appendChildchild； const append_children_to_ele=parent，children=> 儿童 .mapelement_用于_def .forEachappend_to_elementparent； const three_new_children=[1,2,3]。reduceAC=>acc.concatnew_children，[]； 将\u children\u追加到\u eledocument.getElementByIddiv1，三个\u新的\u子元素；

---

为什么不制作一个文档片段呢。它将保存多次重新呈现？为什么不制作一个文档片段呢。它将保存多次重新渲染？是否遇到循环？是否遇到循环？