HTML，Javascript：将新元素追加到当前的空元素

Question

如何检查元素是否包含内容（空格除外），如果元素没有内容，则附加新元素？如果可能，只需要纯粹的javascript。

<div id="container">


</div>

如果容器只有空格，那么：

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

VS

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

如果容器有内容（不需要附加EMPTY）：

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

Answer 1

您可以查看trim med innerHTML是否为空字符串：

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

<div></div>
<div>


</div>

<div>I am not empty</div>

Answer 2

如何检查空虚

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

如何追加

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

Answer 3

像这样：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;