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

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

修改

以下代码产生与上述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>');
}

如何在div没有孩子的情况下用内容填充div？

3 个答案: