Question

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

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

我部分地知道如何创建div，但我不知道如何使用不同的id制作div。

Answer 1

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>

Answer 2

var divcount = 1;
$('button').click(function(){
   $('<div/>', { id:'comment'+divcount++ })
});

Answer 3

这是一个随机ID生成器。

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

createParanoidID();  // id_1js7ogi93ixt6x29w9svozegzhal67opdt3l3cf1iqidvgazlyaeh1ha7a74bswsg
createParanoidID();  // id_1fleq6chguuyyljhy39x3g7mg661mg845oj8fphnxgvm0bdgz7t3w0q01jptogvls
createParanoidID();  // id_ajz1ft17ml4eyz08gd3thcvq3fx1ycr927i0h2zgyw8bzq9wurv1gdfogly8tbls

Answer 4

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

Answer 5

<强> 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>');

});

的 DEMO 的

Answer 6

如果您不想像以前的答案一样使用全局计数器，您可以始终获得子项数，并将其用作相对值，您将从中创建另一个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); 
}

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

Answer 7

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

首先，您需要一个按钮：

<button id="onClickOfThisButtonAnewDivWithArandomIDwillBeInserted"></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');
});

这是FIDDLE

创建具有不同id的div

7 个答案: