2

I want to create multiple paragraphs with each two inputfield with Javascript. I wanted to know, if there is a way to have a shorter code but the same result?

It should have the same result like this but with a shorter code:

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>

1
  • Have you encountered loops yet? Commented Oct 30, 2020 at 17:03

7 Answers 7

2

I could not think of any other solution than using a for loop 😁 This definitely reduces the code by half length though.

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>

Sign up to request clarification or add additional context in comments.

Comments

1

Wrap your code into a function

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

Call the function n times

createPara()
createPara()

Additionally you can pass params such as class, id etc.

Comments

0

well the way you have it written, you are executing the exact same code multiple times. why not put it in a function?

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

1 Comment

Why not make a document fragment. It will save multiple re-rendering?
0

Create a document fragment and append it to DIV instead of creating individual elements.

In the current setup, HTML elements will reflow each time you append any element.

With DocumentFragment you can save multiple reflows as it reflows only once when attached.

Please refer https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment for information.

Comments

0

wrap your code into a function and give it number of 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);
         }
      }
   }

Call the function and give it the number u want to repeat for exemple 5 time :

createPara(5)

you can also give it the number of inputs

Comments

0

I thought I would do something for a more general case, but might have gotten a bit carried away; anyway:

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

const element_for_def = (def) => {
  const element = document.createElement(def.tag);
  
  if(def.children && 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>

Comments

0

ma is a reference to an element object which you want to create multiple paragraphs. I use 10 for multiple paragraphs line. You can use your required number.

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

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.