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