如何使用JavaScript判断指定元素是否已被追加到DOM节点中

需求说明 #

我有一个JavaScript函数，其功能是追加一个类名为myPara的p标签。需要判断当前该元素是否已经被追加到DOM中，满足以下逻辑：

• 如果已经被追加，则停止后续的追加操作
• 如果未被追加，则执行p标签的追加操作

原有代码 #

JavaScript代码 #

function appendPara() {
  let para = document.createElement("p");
  para.className = "myPara";
  var textnode = document.createTextNode("Dummy is my brother");
  para.appendChild(textnode);
  document.getElementById("containPara").appendChild(para);
}

function checkPara() {
  //if (more than 1 length of class ="dummyPara" present)
    //appendPara() will not append next element
//} else {
  //appending will take place by appendPara()
//}
}

HTML代码 #

<div id="containPara">
  <p class="dummyPara">I am dummy plz don't remove me. You get a chance on next appendings but leave the 1st on he is my brother from another mother</p>
</div>
<button onclick="appendPara()">Append p</button>
<button onclick="checkPara()">Check appending</button>

实现方案 #

我们可以通过原生DOM选择器查找是否已存在类名为myPara的元素，根据查找结果决定是否执行追加操作即可。

方案1：将判断逻辑整合到追加函数中（推荐） #

直接修改appendPara函数，每次触发追加前先做存在性校验，无需额外的校验触发按钮：

function appendPara() {
  // 查找是否已存在类为myPara的p标签，限制在containPara容器内查找避免误判
  const existedPara = document.querySelector('#containPara p.myPara');
  // 已存在则直接终止函数
  if (existedPara) return;

  // 不存在则执行原有追加逻辑
  let para = document.createElement("p");
  para.className = "myPara";
  const textnode = document.createTextNode("Dummy is my brother");
  para.appendChild(textnode);
  document.getElementById("containPara").appendChild(para);
}

方案2：保留原有checkPara函数结构 #

如果需要保留单独的校验触发逻辑，可以按如下实现checkPara函数：

function checkPara() {
  const existedPara = document.querySelector('#containPara p.myPara');
  if (!existedPara) {
    // 不存在时调用追加函数
    appendPara();
  }
}

内容的提问来源于stack exchange，提问作者Yupma