CODEWITHSUNDEEP
javascript
Save Pain
Save Pain

Reputation: 257

How to create multiple paragraphs with Javascript with shorter code?

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>

Upvotes: 2

Views: 1736

Answers (7)

Md Mohiuddin
Md Mohiuddin

Reputation: 1

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

Upvotes: 0

Ben Stephens
Ben Stephens

Reputation: 3371

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>

Upvotes: 0

nafaa jamel
nafaa jamel

Reputation: 56

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

Upvotes: 0

Krishna Sai
Krishna Sai

Reputation: 301

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>

Upvotes: 2

Dhruvi Makvana
Dhruvi Makvana

Reputation: 905

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.

Upvotes: 0

Rick
Rick

Reputation: 1870

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

Upvotes: 0

EugenSunic
EugenSunic

Reputation: 13703

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.

Upvotes: 1

Related Questions