如何用原生JavaScript实现仅当元素不存在时向DOM添加HTML？

我需要向DOM中添加一个元素，但仅当该元素不存在时才执行添加操作——这个逻辑会在AJAX调用中使用，可能重复执行，所以必须先做存在性检查。

用jQuery实现这个逻辑很简单，代码如下：

if( jQuery(".new_div").length == 0){
    jQuery("<div class='new_div'></div>").appendTo(".toolbar-sorter");
}

请问如何用原生JavaScript实现相同的检查逻辑？我目前的原生JS代码如下：

const element = document.querySelector(".toolbar-sorter")
element.insertAdjacentHTML("beforeend", "<div class='new_div'></div>");

原生JavaScript实现方案 #

核心思路和jQuery一致：先检查目标元素是否存在，不存在再执行添加操作。

方法一：通过querySelector直接判断元素是否存在

// 先查找要添加的目标元素
const targetElement = document.querySelector(".new_div");
// 找到父容器
const parentElement = document.querySelector(".toolbar-sorter");

// 只有目标元素不存在，且父容器存在时，才执行添加
if (!targetElement && parentElement) {
    parentElement.insertAdjacentHTML("beforeend", "<div class='new_div'></div>");
}

方法二：通过querySelectorAll的长度判断（和jQuery逻辑完全对应）

const parentElement = document.querySelector(".toolbar-sorter");

// 检查页面中目标元素的数量是否为0
if (document.querySelectorAll(".new_div").length === 0 && parentElement) {
    parentElement.insertAdjacentHTML("beforeend", "<div class='new_div'></div>");
}

更精准的范围检查（仅检查父容器内）

如果只需要确保父容器.toolbar-sorter内部不存在目标元素，而非整个页面，可以把查询范围限定在父元素内，避免页面其他位置的同class元素影响判断：

const parentElement = document.querySelector(".toolbar-sorter");

// 检查父容器内是否存在目标子元素
if (parentElement && !parentElement.querySelector(".new_div")) {
    parentElement.insertAdjacentHTML("beforeend", "<div class='new_div'></div>");
}

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