Как добавить больше div в jQuery

Question

Я пытаюсь добавить новый div на страницу, когда вы нажимаете NEW DIV?

Как я мог это сделать? Может ли кто-нибудь указать мне правильное направление?

Answer 1

Дополнительные примеры кода всегда полезны, но я постараюсь дать вам некоторые основы.

<div id="Content">
  <button id="Add" />
</div>

$(function () {
  $('#Add').click(function () {
    $('<div>Added Div</div>').appendTo('#Content');
  });
});

Answer 2

Обязательно используйте функцию $(document).ready в jQuery.Это необходимо для запуска скрипта после загрузки страницы и включения действия, вызываемого для этой фиктивной кнопки, чтобы добавить новый div к существующему div.

Вы также можете использовать это для добавления чего-либоВы хотите использовать другие элементы на странице с помощью селекторов jQuery, таких как .class или #id.

<div id="Content">
  <button id="Add" />
</div>

$(document).ready(function() {
    $('#Add').click(function () {
    $('<div>Added Div</div>').appendTo('#Content');
  });
});

. Другой полезный параметр - заменить содержимое тега на jQuery.Вы можете сделать это, используя функцию .html().

<div id="Content">
      <p id="changed">Hello World!</p>
      <button id="change_content" />
</div>

$(document).ready(function() {
    $('#change_content').click(function () {
        $('#changed').html('Goodbye World');
    });
});

Надеюсь, это поможет!

Answer 3

Существует множество разных способов, это зависит от того, что вы хотите сделать. Вот простой способ:

$('#id').html('<div>Hello</div>')

Что заменяет внутренний html элемента с id 'id' на "Hello". Итак, это:

<div id='id'>Old Html </div>

станет:

<div id='id'><div>Hello</div></div>

А это:

$('#id').after('<div>Hello</div>')

Превратит «Старый HTML» в это:

<div id='id'>Old Html</div>
<div Hello </div>

Проверьте www.visualjquery.com и нажмите кнопку Манипуляции. Это дает вам больше, чем вы могли бы знать, чтобы легко изучить.