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不是函数”...请建议。谢谢......

Answer 1

您似乎想要在点击一次按钮时删除按钮#b1。为什么不删除它并在单击按钮时添加元素？像这样：

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

#d1{
  background-color: gray;
}

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

如果您真的想查看d2中是否存在标识为d1的元素，您可以使用以下if语句执行此操作：

if ($('#d1').find('#d2').length) {
   // Element found
}

使用该方法，您可以执行另一个不删除按钮但在创建一个元素后无效的变体：

$("#b1").click(function(){
  if (!$('#d1').find('#d2').length) {
    $("#d1").append($("<div>",{id:"d2",text:"Dynamically added Second DIV"}));
  }
});

#d1{
  background-color: gray;
}

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

Answer 2

您可以查看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>

Answer 3

function addElement() {
  var parent = $('#container')["0"];
  var elem = document.createElement('div');
  elem.setAttribute('id', 'child');
  var text = document.createTextNode("child");
  elem.append(text);
  if(!parent.children.length > 0) {
    parent.append(elem);
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">Parent</div>
<button type="button" id="button" onclick="addElement();">Click</button>

动态附加DOM元素，如果已添加，则无需附加

3 个答案: