HTML，JavaScript：将新元素添加到当前的空元素

Question

How can I check if an element has a content (except whitespaces) then append a new element if the element has no content? Just pure javascript if possible.

<div id="container">


</div>

if the container has only whitespaces then:

<div id="container">EMPTY</div>

VS

<div id="container">I am not empty</div>

if the container has content (no need to append EMPTY):

<div id="container">I am not empty</div>

Answer 1

You could check to see if the trim med innerHTML is the empty string:

 document.querySelectorAll('div').forEach(div => { if (div.innerHTML.trim() === '') div.textContent = 'Empty'; }); 

 <div></div> <div> </div> <div>I am not empty</div> 

Answer 2

how to check for emptiness

var isEmpty = !document.getElementById("container").innerText.trim();

how to append

if(isEmpty) document.getElementById("container").innerText = "EMPTY";

Answer 3

Like so:

 var checkDivs = () => { document.querySelectorAll('#container').forEach((el)=>{ el.innerText = (el.innerText) ? el.innerText:'EMPTY'; }) } checkDivs(); 

 <div id="container"> </div> if the container has only whitespaces then: <div id="container">EMPTY</div> VS <div id="container">I am not empty</div> if the container has content (no need to append EMPTY): <div id="container">I am not empty</div>