javascript - 如何在单击按钮时创建具有不同类的 div？

Question

我正在创建一个 html，它将创建一个 div 并通过单击按钮将输入中的内容复制到该 div。

像这样:

HTML

<input type="text">
<button>Copy</button>
<p></p>

脚本

$('button').click(function() {
   var div = document.createElement('div');
   $('p').append(div);
   $('div').html($('input').val());
});

它完美地工作

然后我给它添加了类。

看起来像这样:

$('button').click(function() {
   var div = document.createElement('div');
   div.className = "Someclass";
   $('p').append(div);
   $('div').html($('input').val());
});

它也运行良好。但是当我单击按钮时，它会将文本复制到所有 div 而不是单个

我如何创建一个按钮来创建具有不同类的不同 div 并从 <input> 复制文本到新创建的 div

我在网上发现我可以使用 i++不同类的javascript中的东西。
但是该代码无法正常工作。请告诉我这里有什么错误。

我的代码是这样的:

$('button').click(function() {
   var i = 0;
   var div = document.createElement('div');
   div.className = "Someclass" + i++;
   $('p').append(div);
   $('div').html($('input').val());
});

Answer 1

你可以这样做:

var clickCount = 0;

$('button').click(function() {
  var html = $('input').val();
  var classname = 'someclass' + clickCount++;
  $('<div>').addClass(classname).html(html).appendTo('p');
});