Блог

Я хочу создать несколько абзацев с каждым из двух входных полей с помощью Javascript. Я хотел знать, есть ли способ получить более короткий код, но с тем же результатом?

Он должен иметь тот же результат, что и этот, но с более коротким кодом:

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

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

    var para3 = document.createElement("p");
    //etc.  

 <div id="div1"></div>  

Я не мог придумать никакого другого решения, кроме использования цикла for 😁 Это определенно уменьшает код на половину длины.

 numberOfParagraphs = 3
for(let i = 0; i< numberOfParagraphs;i  ){
    var para= document.createElement("p");
    var i1 = document.createElement("input");
    var i2 = document.createElement("input");
    para.appendChild(i1);
    para.appendChild(i2);
    document.getElementById("div1").appendChild(para);
}  

 <div id="div1"></div>  

Оберните свой код в функцию

 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);
}
  

Создайте фрагмент документа и добавьте его в DIV вместо создания отдельных элементов.

В текущей настройке элементы HTML будут перерисовываться каждый раз, когда вы добавляете какой-либо элемент.

С помощью DocumentFragment вы можете сохранить несколько повторных переходов, поскольку он повторяется только один раз при подключении.

Пожалуйста, обратитесь https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment для получения информации.

оберните свой код в функцию и дайте ему номер пункта :

     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);
         }
      }
   }
  

Вызовите функцию и укажите ей число, которое вы хотите повторить, например, 5 раз :

 createPara(5)
  

вы также можете указать количество входных данных

Я думал, что сделаю что-нибудь для более общего случая, но, возможно, немного увлекся; в любом случае:

 const new_children = [
  { tag: 'p', children: [
    { tag: 'input' },
    { tag: 'input' },
  ] },
];

const element_for_def = (def) => {
  const element = document.createElement(def.tag);
  
  if(def.children amp;amp; def.children.length > 0)
    append_children_to_ele(element, def.children);
  
  return element;
};

const append_to_element = (parent) => (child) => parent.appendChild(child);

const append_children_to_ele = (parent, children) =>
  children
    .map(element_for_def)
    .forEach(append_to_element(parent));

const three_new_children = [1,2,3].reduce(acc => acc.concat(new_children), []);

append_children_to_ele(document.getElementById("div1"), three_new_children);  

 <div id="div1"></div>  

ma — это ссылка на объект element, для которого вы хотите создать несколько абзацев. Я использую 10 для строки с несколькими абзацами. Вы можете использовать свой требуемый номер.

 let ma = document.getElementById("multiple-para").innerHTML;

for(var i =0; i<10; i  ){
document.write(ma   "<br>");
}