Question

For example, when I have:

<div class="abc123"></div>  <!-- no child div -->

I want to insert a new div in it:

<div class="xyz">some content</div>

So that the outcome is:

<div class="abc123">
    <div class="abc">Some Content</div>
</div>

How can I implement this using javascript?

Answer 1

in jQuery:

$(".abc123").each(function() {
    if (this.children(".abc").length == 0) {
        $(this).append('<div class="xyz">some content</div>');
    }
});​

in Simple JS

var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
    if (divs[i].childNodes.length == 0) { // testing if it has not child
        var newdiv = document.createElement('div');
        newdiv.innerHTML = "some content";
        newdiv.className = "xyz";
        divs[i].appendChild(newdiv);
    }
}​

Edit:

This following piece of code produces the same effect as done in the above mentioned jQuery code(edited in light of the comment by RobW ):

var divs = document.getElementsByClassName("abc123");
for (var i = 0; i < divs.length; i++) {
    if (divs[i].getElementsByClassName("abc").length == 0) { 
        var newdiv = document.createElement('div');
        newdiv.innerHTML = "some content";
        newdiv.className = "xyz";
        divs[i].appendChild(newdiv);
    }
}​