How do I create a set of elements dynamically in JS

Question

How can i create a set of elements i.e Not just a div but collection of divs may be like this

<div class="row">
  <div class="col-xs-12">
    <div class="box" style='padding-bottom:0px;'>

      <div class="box-content" style='z-index:-1;'>
        <div class="box">

          <div class="avatar">
            <img src="src" alt="Profile" style="width: 80px;height:80px;"/>
          </div>
          <div class="page-feed-content">
            <a href='href'>
            <small class="label label-primary"></small>

Usually I create it one by one and using appendchild function, i append child to parent but It is a hectic task. How can I easily dynamically create this set of HTML elements on js using either native or jQuery?

You can compose it as an HTML string, and then use `someelement.innerHTML = HTMLstring;`. — Barmar, Jul 03 '14 at 16:58
Please do not forget to mark a solution if it answers your question, or leave a comment to help refine the question and solution. — Brett Weber, Jul 03 '14 at 22:07

score 1 · Accepted Answer · edited May 23 '17 at 10:32

Create a generic handler and run it in a loop :

function CreateElement(elemParent, sTagName, aAttributes)
{
   // Use your create element code here where elemParent is the parent 
   // sTagName is your Tag name and 
   // aAttributes is a collection of attributes to set on your new element
}

for (var i = 0; i < nLimit; i += 1)
   CreateElement(elemParent, "sTagName", [{ Key : Value }, { Key : Value }]);

Here is another link to help you out : What is the most efficient way of creating an HTML element and appending attributes to it and then wrapping it inside of another element?

How do I create a set of elements dynamically in JS

1 Answers1