如何在div沒有孩子的情況下填充div的內容？

Question

例如，當我有：

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

我想插入一個新的div：

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

這樣的結果是：

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

我如何能實現這使用JavaScript？

Answer 1

jQuery中：

在簡單的JS

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

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); 
    } 
}​ 

編輯：

這下面的一段代碼產生如上面提到的jQuery代碼做了同樣的效果（通過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); 
    } 
}​ 

Answer 2

使用jQuery：

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

Answer 3

也許你想看看這個問題：How to check if element has any children in Javascript?

似乎像你正在尋找:)