1

我有一个关于创建 div 的问题：

我有按钮，当用户点击它时，javascript（或 jquery）需要创建一个 div。但是当用户再次点击时，它应该创建另一个 div，但具有不同的 id。因此，每次用户点击时都应该创建具有不同 id 的 div。

我部分知道如何创建 div，但我不知道如何制作具有不同 ID 的 div。

4

7 回答 7

7 

var c = 0; // Counter

$('#add').on('click', function() {
  c += 1;
  $('#parent').append('<div id="child'+ c +'">'+ c +'</div>');
});
#child1{color:red;}
#child2{color:blue;}
#child3{color:orange;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">ADD</button>
<div id="parent"></div>

于 2012-05-06T19:22:53.240 回答
1 
var divcount = 1;
$('button').click(function(){
   $('<div/>', { id:'comment'+divcount++ })
});
于 2012-05-06T19:24:09.117 回答
1

这是为您准备的随机 ID 生成器。

function createParanoidID() {
    return 'id_' + Math.floor(Math.random() * 9e99).toString(36);
}

createParanoidID();  // id_1js7ogi93ixt6x29w9svozegzhal67opdt3l3cf1iqidvgazlyaeh1ha7a74bswsg
createParanoidID();  // id_1fleq6chguuyyljhy39x3g7mg661mg845oj8fphnxgvm0bdgz7t3w0q01jptogvls
createParanoidID();  // id_ajz1ft17ml4eyz08gd3thcvq3fx1ycr927i0h2zgyw8bzq9wurv1gdfogly8tbls
于 2012-05-06T19:30:44.770 回答
0

使用变量作为计数器和“attr”函数来设置 id 属性。

于 2012-05-06T19:23:03.717 回答
0

HTML

<button id="button">Create Div</button>
<div class="container"></div>

jQuery：

$('#button').on('click', function() {

    var count = $('div.container div').length,
        id = count + Math.floor(Math.random() * 100);
    $('div.container').append('<div id="'+ id+'">ID of this div is: '+ id +' </div>');

});

演示

于 2012-05-06T19:30:11.113 回答
0

如果您不想像以前的答案那样使用全局计数器，您始终可以获取子项的数量并将其用作您将创建另一个 id 的相对值。像这样的东西（使用jQuery）：

function add_another_div() {
    var wrap_div = document.getElementById("#id_of_div_who_contain_all_childrens");
    var already_childs = $("#id_of_div_who_contain_all_childrens").children().length;
    var div = document.createElement('div');
    var divIdName = 'new_div-'+ (already_childs+1);
    div.setAttribute('id', divIdName);
    wrap_div.appendChild(div); 
}

当然，这要求您所有的孩子都有相同的父母（相同的包装）。如果不是这种情况，并且它们被多个包装器分开，那么只需为它们使用唯一的类名，然后像这样计算它们。我发现这种方法更好、更容易，而不是使用我需要注意的全局计数器。

于 2012-05-06T19:37:51.803 回答
0

这是执行此操作的简单方法。

首先，您需要一个按钮：

​&lt;button id="onClickOfThis​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ButtonAnewDivWithArandomIDwillBeInserted"></button>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

然后是javascript：

$("#onClickOfThisButtonAnewDivWithArandomIDwillBeInserted").on('click', function() {

var myID = 'randomIDnumber_'+Math.random()+Math.random()+Math.random()+Math.random()+Math.random()+Math.random();
var MyNewElement = document.createElement('div');
    MyNewElement.id = myID.replace(/\./g, '');
    $(MyNewElement).appendTo('body');
});

这是一个小提琴

于 2012-05-06T19:40:05.997 回答