Question

I need to create the following code from the js side, because I am not sure how many of the list items to be printed and i need to set the data-ids from backend… But basically the output needs to look like this;

<ul id="myList">
<li><a data-id="Prev" href="#">Prev</a></li>
<li><a data-id="1" href="#">1</a></li>
<li><a data-id="2" href="#">2</a></li>
<li><a data-id="3" href="#">3</a></li>
<li><a data-id="4" href="#">4</a></li>
<li><a data-id="Next" href="#">Next</a></li>
 </ul>  

Answer 1

Try this code

// Lets say you get this array from ypur backend..

var arr= ['Prev' , '1','2','3','4','Next'];

var html = '<ul id="myList">';

for(var i =0;i<arr.length ; i++){
    html +=  '<li><a data-id="' + arr[i] + '" href="#">'+arr[i] + '</a></li>' ; 
}

html += '</ul>';

// Append to your div

$('#list').append(html);

CHECK FIDDLE