javascript - Appending content to li elements from JSON array -

I do not have a list of 4 items and I want to add a div with the class "meta" This div contains h2 and p elements that should be filled with a JSON array.

  & lt; Ul id = "list" & gt; & Lt; Li & gt; & Lt; Div class = "meta" & gt; & Lt; H2 & gt; Title here & lt; / H2 & gt; & Lt; P & gt; Some details & lt; / P & gt; & Lt; / Div & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Div class = "meta" & gt; & Lt; H2 & gt; Title here & lt; / H2 & gt; & Lt; P & gt; Some details & lt; / P & gt; & Lt; / Div & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Div class = "meta" & gt; & Lt; H2 & gt; Title here & lt; / H2 & gt; & Lt; P & gt; Some details & lt; / P & gt; & Lt; / Div & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Div class = "meta" & gt; & Lt; H2 & gt; Title here & lt; / H2 & gt; & Lt; P & gt; Some details & lt; / P & gt; & Lt; / Div & gt; & Lt; / Li & gt; & Lt; / Ul & gt;  

JavaScript

  var nums = document.getElementById ("list"); Var listItem = nums.getElementsByTagName ("li"); Var listItemElement = document.querySelectorAll ("li"); Var Output; For (data.info in var i) {output + = "& lt; div class = 'meta' & gt;"; Production + = "& lt; h2 & gt;" + Data.info [i] .title + "& lt; / h2 & gt;"; Production + = "& lt; p & gt;" + Data. Info [i] .desc + "& lt; / p & gt;"; Production + = "& lt; / div & gt;"; (Var x = i; listItem.length; x ++) {listItem [x] .appendChild (output); } // Clear the object after every onepeed output = ""; } In the JavaScript code, I tried to add a loop inside the main one, so when the output object is filled, it should be added to the current Li element.  
 You can get JSON array and live code  
 How should the code work? It should take every item from the JSON array and add it to the Li element and until it reaches the previous one.  
 In my case I have not found any empty list in which no data is filled.  
 Any help in that?  
  
 
 
 Believing that what you really want to do, each item is  a  related  li , no internal loop is required. 
 
 Since you are not using jQuery, you can not attach an HTML string - but in this situation,  innerHTML  will work properly, because  li < / Code> Elements are already empty and we do not have to preserve any existing content. 
 
 
 
 
  var data = {" info ": [[" title ":" title here "," desc ":" this is some information about this item, between 20 to 30 . "}, {" Title ":" heading 2 here "," desc ":" this 2 has some information about this item, it is from 20 to 30. " }, {"Title": "title 3 here", "desc": "this 3 has some information about this item, it is between 20 to 30." }, {"Title": "heading 4 here", "desc": "this 4 is some information about this item, it ranges from 20 to 30." }]} Var nums = document.getElementById ("list"); Var listItem = nums.getElementsByTagName ("li"); (Data.info in Var i) {var output = "& lt; div class = 'meta' & gt; + "& Lt; h2 & gt;" + Data. Info [i] .title + "& lt; / h2 & gt;" + "& Lt; p & gt;" + Data. Info [i] .desc + "& lt; / p & gt;" + "& Lt; / div & gt;"; Var Li = List item [i]; Li.innerHTML = Output; }  
 
  & lt; Ul id = "list" & gt; & Lt; Li & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; / Li & gt; & Lt; / Ul & gt;  
 
 
 
 
 If your  data  contains   or other HTML characters, you might want to include the text as text nodes instead of HTML: 
 
 for  (var.in in data.info) {var div = Document.createElement ('div'); Div.className = 'Meta'; Var h2 = document.createElement ('h2'); Var ht = document.createTextNode (data.info [i] .title); H2.appendChild (ht) var p = document.createElement ('p'); Ht = document.createTextNode (data.info [i] .desc); P.appendChild (HT) div.appendChild (h2); Div.appendChild (p); Var Li = List item [i]; Li.appendChild (div); }