javascript - 动态追加 DOM 元素，如果已经添加则无需追加

Question

我试图在单击按钮时动态地将 div 添加到父 div。但是一旦创建了它，单击按钮时就不应该再次创建另一个相同的子 div。这就是我试图做的

$("#b1").click(function(){
        $("#d1").has("#d2").remove($(this));
        $("#d1").append($("<div>",{id:"d2",text:"Dynamically added Second DIV"}));
    });

它正在工作，但我在控制台中收到“TypeError: expr.replace is not a function”...请提出建议。 谢谢...

Answer 1

您可以检查children.length来查找子项是否存在

$("#b1").click(function() {
  if ($("#d1").children("#d2").length <= 0) {
    console.log(1)
    $("#d1").append($("<div>", {
      id: "d2",
      text: "Dynamically added Second DIV"
    }));
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1">Paremt Dom</div>
<button id="b1">Click</button>