javascript - 如何在 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 中：

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

在简单的 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);
    }
}​

编辑：

下面这段代码产生与上面提到的 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

也许你想看看这个问题：How to check if element has any children in Javascript?

好像你在找什么:)

Answer 3

使用 jQuery：

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