How do I append these nested divs in some parent div

Question

I have below code, I want to add this inside a parent div

<div style="width: 100%; overflow: hidden;">
<div style="width: 10%; float: left;"> <div><img src="assets/img/abc.png" style="height: 35;margin-left: 10; margin-right: 5px;"/></div> <div id="toro" style="color: black"> Hi </div></div>
<div style="margin-left: 25%;"><div style="margin-top: 7;
font-weight: bold; color: black"> <b>hie</b></div> <div style="color: black" > Hello </div><div style="float: right" id="time">time</div></div>

• Sᴀᴍ Onᴇᴌᴀ: Possible duplicate of Add/remove HTML inside div using JavaScript
• Jhecht: Please include the code used to create the HTML, as we could probably help you refactor that code.

Answer 1

Example to add <div>

It's already answered here Add/remove HTML inside div using JavaScript

var jsonArr = [{
 'id': 1,
 'name': 'RAJ'
 }, {
 'id': 2,
 'name': 'RAY'
 }, {
 'id': 3,
 'name': 'RAM'
 }];
 function addDiv() {
 for (var i = 0; i < jsonArr.length; i++) {
 var div = document.createElement('div');
 div.innerHTML = '<div style="width: 100%; overflow: hidden;">' +
 '<div style="width: 10%; float: left;">' +
 '<div><img src="assets/img/abc.png" style="height: 35;margin-left: 10; margin-right: 5px;"/></div> <div id="toro" style="color: black">' + jsonArr[i].id + '</div>' +
 '</div>' +
 '<div style="margin-left: 25%;">' +
 '<div style="margin-top: 7;font-weight: bold; color: black"> <b>hie</b></div> <div style="color: black" >' + jsonArr[i].name + '</div><div style="float: right" id="time">'+new Date()+'</div></div>';
 document.getElementById('parent').appendChild(div);
 }
 }

<div id="parent">Parent div
</div>
<button onClick="addDiv()">Add Div</button>

• Ritzor: My divs are nested and multiple so if you can help me with creating my divs, I will accept your answer
• Naghaveer R: Do you want to dynamically add multiple <div>'s? Or is your child <div> is same always?
• Ritzor: I get json array in API response, then I am using for loop to loop through it, at every iteration I have to append this html code with some values in it.
• Ritzor: basically it represents one row of a listview
• Ritzor: how do I add onclick event for this div?