使用jQuery只创建一个div

我用jQuery创建了一个div。它工作得很好，但每次用户单击按钮都会创建一个新的div。我只想创建一个具有唯一id的div。我如何控制它

这里要测试：

JQUERY：

$("#button").click(function() {
    $('<div></div>').attr('id', 'red').insertAfter("#button");
}); 

$（“#按钮”）。单击（函数（）{
$（''）.attr（'id'，'red'）.insertAfter（“#按钮”）；
}); 

HTML:

$（'#红色'）。长度==0&&$（''）
.attr（'id'，'red'）
.insertAfter（“#按钮”）；

您可以尝试检查div是否已经存在

$（'#红色'）。长度==0&$（''）
.attr（'id'，'red'）
.insertAfter（“#按钮”）；

您可以尝试检查div是否已经存在

---

id为

红色的div只能添加一次？

然后使用附加单击处理程序

$("#button").one("click", function() {
    $('<div></div>').attr('id', 'red').insertAfter("#button");
}); 

$（“#按钮”）.one（“单击”，函数（）{
$（''）.attr（'id'，'red'）.insertAfter（“#按钮”）；
}); 
id为
红色的div只能添加一次？

然后使用附加单击处理程序

$("#button").one("click", function() {
    $('<div></div>').attr('id', 'red').insertAfter("#button");
}); 

$（“#按钮”）.one（“单击”，函数（）{
$（''）.attr（'id'，'red'）.insertAfter（“#按钮”）；
}); 
有很多方法可以做到这一点

例如，您可以声明一个全局变量并检查其计数

var a = 1;
$("#button").click(function() {

    if(a == 1)
    {
    $('<div></div>')
        .attr('id', 'red')
        .insertAfter("#button");
        a = a+1;
    }
}); 

var a=1；
$（“#按钮”）。单击（函数（）{
如果（a==1）
{
$('')
.attr（'id'，'red'）
.insertAfter（“#按钮”）；
a=a+1；
}
}); 

如JSFIDLE所示，有很多方法可以做到这一点

例如，您可以声明一个全局变量并检查其计数

var a = 1;
$("#button").click(function() {

    if(a == 1)
    {
    $('<div></div>')
        .attr('id', 'red')
        .insertAfter("#button");
        a = a+1;
    }
}); 

var a=1；
$（“#按钮”）。单击（函数（）{
如果（a==1）
{
$('')
.attr（'id'，'red'）
.insertAfter（“#按钮”）；
a=a+1；
}
}); 

如jsfiddle所示，您可以检查
#红色
是否不存在

$（“#按钮”）。单击（函数（）{
如果（$（'#红色'）。长度==0）
{
$('')
.attr（'id'，'red'）
.insertAfter（“#按钮”）；
}
}); 
您可以检查
#红色
是否不存在

$（“#按钮”）。单击（函数（）{
如果（$（'#红色'）。长度==0）
{
$('')
.attr（'id'，'red'）
.insertAfter（“#按钮”）；
}
}); 
检查DOM中的ID，如果存在则不创建新元素？检查DOM中的ID，如果存在则不创建新元素？
  $("#button").click(function() {
        if($('#red').length == 0 )  
        {
        $('<div></div>')
            .attr('id', 'red')
            .insertAfter("#button");

        }
    });