Пусть у нас есть разметка
|
1 2 3 4 5 |
... <div id="1">First</div> <div id="2">Second</div> <div id="3">Third</div> ... |
Тогда добавить и удалить элементы мы можем следующим образом
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$(function(){ //Способ №1 $('#1').append('<p id="newEl">some new html content can be added directly</p>');// Добавляем разметку напрямую //Способ №2 var newEl2=document.createElement('p'); newEl2.innerHTML='It is Element of html page in JavaScript'; newEl2.setAttribute('id','newEl2'); $('#2').append(newEl2); // Добавление элемента //Способ №3 newEl3=$('<p id="newEl3">It is jQuery object</p>'); $('#3').append(newEl3); //Удаление элементов alert('Сейчас будет удален элемент с id=newEl3'); $('#newEl3').remove(); // Собственно удаление newEl3=$('<p id="newEl3">Только что элемент был удален' +' отсюда и добавлен сюда снова в виде этой строки</p>'); $('#3').append(newEl3); $('#newEl3').css('background-color','yellow'); }); |
Также для создания элемента можно воспользоваться простым клонированием
|
1 2 |
newEl3=$('#newEl').clone(); $('#3').append(newEl3); |
Также есть метод prepend() – это добавление не в конец, а в начало выборки. И методы appendTo, prependTo – добавляют элементы в качестве дочерних к элементу, который указан в параметре метода.
Основные методы мы рассмотрели.