JS or jQuery way to dynamically create DOM elements

Question

Could anyone point me a more easy-to-read-and-expand way of doing this:

data = {/*very very long json*/};
var inHTML = "";

jQuery.each(data, function(key, value){
    var articleUrl = 'url-to-somewhere';

    var newItem = "<div class='item'><div class='item--poster'><img src='"+data[key].backdropUrl+"' alt='title'/></div><div class='item--content'><h2>"+data[key].title+"</h2><ul><li>"+data[key].productionYear+"</li><li>"+data[key].productionCountry+"</li></ul></div><div class='item--link'><p><a class='' href='"+articleUrl+"'>Lue lisää</a></p></div></div>";
    inHTML += newItem;  

});

jQuery("#container").html(inHTML);

What I'm looking for is something similar to ng-repeat of Angular.

You may put one piece of very very long json here for our reference. — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Apr 25, 2016 at 11:31
Praveen Kumar, I dont think pasting it here would make any difference. — Shamppi
– Shamppi, Commented Apr 25, 2016 at 11:32
You can create element like $('<div />', { "class" : "item"}).append($('<div />', { "class" : "item--poster"})) — Satpal
– Satpal, Commented Apr 25, 2016 at 11:33

Praveen Kumar Purushothaman · Accepted Answer · 2016-04-25 11:38:58Z

I would bet on using placeholder template and .clone(). What exactly you need to do is, create a Master DOM like this:

<div id="master-dom" class="item">
  <p><strong>Name</strong> <span class="Name"></span></p>
  <p><strong>Age</strong> <span class="Age"></span></p>
</div>

Now give a CSS that would hide the Master DOM:

#master-dom {display: none;}

The next attempt would be, have a #content area:

<div id="content"></div>

And now comes the JavaScript part.

var data = [
  {
    "name": "Praveen",
    "age": 27
  },
  {
    "name": "Jon Skeet",
    "age": 29
  },
  {
    "name": "Kumar",
    "age": 25
  }
];

Having the above as the data structure, you can loop through and insert:

$.each(data, function (i, v) {
  // We need the v.
  $("#master-dom").clone()
                  .removeAttr("id")
                  .find(".Name").text(v.name).end()
                  .find(".Age").text(v.age).end()
                  .appendTo("#content");
});

See the final output here:

$(function() {
  var data = [{
    "name": "Praveen",
    "age": 27
  }, {
    "name": "Jon Skeet",
    "age": 29
  }, {
    "name": "Kumar",
    "age": 25
  }];

  $.each(data, function(i, v) {
    // We need the v.
    $("#master-dom").clone()
      .removeAttr("id")
      .find(".Name").text(v.name).end()
      .find(".Age").text(v.age).end()
      .appendTo("#content");
  });
});

* {
  margin: 0;
  padding: 0;
  list-style: none;
}
#master-dom {
  display: none;
}
.item p strong {
  display: inline-block;
  width: 75px;
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div id="master-dom" class="item">
  <p><strong>Name</strong> <span class="Name"></span></p>
  <p><strong>Age</strong> <span class="Age"></span></p>
</div>
<div id="content"></div>

I really believe this would be the underlying logic behind Angular's ng-repeat. Also I would use this above logic if I were in your place.

isvforall · Accepted Answer · 2016-04-25 11:50:18Z

1

You could use ES6 feature Template literals

Your string would look like this

var newItem =
    `<div class='item'>
        <div class='item--poster'>
            <img src='${data[key].backdropUrl}' alt='title'/>
        </div>
        <div class='item--content'>
            <h2>${data[key].title}</h2>
            <ul>
                <li>${data[key].productionYear}</li>
                <li>${data[key].productionCountry}</li>
            </ul>
        </div>
        <div class='item--link'>
            <p>
                <a class='' href='${articleUrl}'>Lue lisää</a>
            </p>
        </div>
    </div>`;

answered Apr 25, 2016 at 11:50

isvforall

8,9166 gold badges39 silver badges52 bronze badges

Collectives™ on Stack Overflow

JS or jQuery way to dynamically create DOM elements

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related