How to use Javascript to create parent and child element at the same time with variable contents

Question

I have a JSON from PHP assoc array:

Array(
    [0] = > Array(
        [topicid] = > 17
        [entry] = > number 12 this one
        [belongdate] = > 2017 - 06 - 12
        [edittime] = > 2012 - 06 - 18 05: 22: 21
        [User_ID] = > 1
    )
    [1] = > Array(
        [topicid] = > 9
        [entry] = > yeah 11 now
        [belongdate] = > 2017 - 06 - 12
        [edittime] = > 2012 - 06 - 18 05: 22: 02
        [User_ID] = > 1
    )
)

I don't give you JSON straightly is because I don't know how to print JSON properly.

I need to create parent div and multiple children elements:

        <div name='entrydiv' class='entrydiv'>          
            <h3 name='topich3' class='topich3'>
                entryjson[i]['topicid']
            </h3>
            <p name='entryp' class='entryp'>
                entryjson[i]['entry']
            </p>
            <a name='belongdatea' class='belongdatea' style='display: none;'>
                entryjson[i]['belongdate']
            </a>
            <a name='lastedittimea' class='lastedittimea'>
                entryjson[i]['edittime']
            </a>
        </div>

Note the contents are variable from JSON. I have checked out this post. But the .append method does't seem to support passing variable to the content. And the .appendTo method does not allow child element(?). I appreciate your help very mush. Thanks.

Answer 1

Here's one example. To create this DOM structure:

<div name='entrydiv' class='entrydiv'> 
    <h3 name='topich3' class='topich3'>
       entryjson[i]['topicid']
    </h3>
</div>

You could use this plain javascript code:

var mainDiv = document.createElement("div");
mainDiv.name = mainDiv.className = "entrydiv";
document.body.appendChild(mainDiv);

var item = document.createElement("h3");
item.name = item.className = "topich3";
item.innerHTML = entryjson[i]['topicid'];
mainDiv.appendChild(item);

You can add code for the other parts and then add a loop to iterate through your JSON to repeat.

Answer 2

If you would like to create the following structure:

<div class="yourClassInHTML">
...
<div>
<img src="thePath"></img>
</div>
...
</div>

then .js code would be:

var element1 = document.createElement("div");
var element2 = document.createElement("img");
img.src = "thePath";
element1.appendChild(element2);
document.getElementsByClassName("yourClassInHTML")[0].appendChild(element1);