Как создать div с другим классом при нажатии кнопки?

Question

Я создавал html, который создавал бы div и копировал вещи во входе в этот div с нажатием кнопки.

Как это:

HTML

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

Script

$('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

1. вынимают i от события щелчка
2. выбрать новый DIV с именем соответствующего класса .Someclass[i]

изменить код так:

var i = 0; 
$('button').click(function() { 

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

Answer 2

Вместо использования .addClass метод JQuery:

$("div name").addClass("yourClass"); 

Answer 3

Вы добавления HTML для всех div present.Do это добавить в него содержимое перед добавлением

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text"> 
 
<button>Copy</button> 
 
<p></p>

Answer 4

Сво делает это, потому что имеют эту строку

$('div').html($('input').val()); 

Вы можете изменить его на

$('p div').html($+'input').val()); 

Answer 5

Вы можете сделать это следующим образом:

var clickCount = 0; 

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

Answer 6

Вы должны дать имя точный класс как «SomeClass» + I с «I» последним индексом из класс, который вы добавили.

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

Ваш код выглядит так, что он добавит только один div по щелчку и что div будет присвоен значение ввода.