如果仅使用javascript，如果另一个div为空，如何将innerHTML添加到div

Question

I have a issue about javascript. I want to add innerHTML to div if it is empty. This is my code, please help me review. All div are the same class, not use id and only using javascript. Thanks html:

<div class="B">Test</div> <br/>
<div class="B"></div> <br/>

javascript:

function test(){
    var x = document.getElementsByClassName("B");
    for (i = 0; i < x.length; i++) { 
        if (x[i].length() < 0){ 
            x[i].innerHTML = "add test";    
        }
    }
}

Answer 1

You need to use x[i].innerHTML.length instead of x[i].length() and it wont be less then zero at minimum it would be zero.

Few of corrections which I made in your code

• Took length of innerHTML instead of html element div
• Length is a Property so parenthesis should not be used
• Length wont be less than zero so condition should check if length is zero.
• For being on safe side trim the innerHTML before you take length.

Live Demo

function test(){
    var x = document.getElementsByClassName("B");
    for (i = 0; i < x.length; i++) { 
        if (x[i].innerHTML.trim().length == 0){ 
            x[i].innerHTML = "add test";    
        }
    }
}

Answer 2

A jquery solution:

$('.B').each(function() {
   var that = $(this);
   if (that.text().length == 0) {
      that.html('add test');
   }
});

---

DEMO

The last two divs with class B that do not have any text will get filled with string add test

 $('.B').each(function() { var that = $(this); if (that.text().length == 0) { that.html('add test'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="A">testA</div> <div class="B">testB</div> <div class="B"></div> <div class="B"></div>