<div class="listwrapper">
  <ul id="listitem">
    <li>
      <div>
        <span>Name : </span>
        <b>{{fullname}}</b> 
      </div>
      <div>
         <span>Age : </span>
         <b>{{age}}</b>      
      </div>
      
    </li>
  </ul>
</div>
/* DEMO PURPOSE */
body{
  font-family:"Arial", sans-serif;
}
var dataobj = [
  {
   "name" : "John Doe",
   "age" : "45"
  },
   {
   "name" : "Jane Dow",
   "age" : "25"
  },
  {
   "name" : "Jane F",
   "age" : "25"
  }
];
var $listitem = $("#listitem");
var el_listitem = $("#listitem").html();
var post_html = "";
//$listitem.html("");
$.each(dataobj,function(index,item){
   
  post_html += el_listitem
               .replace(/{{fullname}}/g,item.name)
                .replace(/{{age}}/g,item.age);
  
  
});

$listitem.html(post_html);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js