1) создание элемента
$("<p>");
$('<p class="bat">Это новый абзац!</p>');
с версии jquery 1.4 можно добавлять атрибуты
$("<p>", {
"class":"bat",
"text":"Это новый абзац!"
});
2) вставка элементов
.append() и .prepend() - присоединяют к объекту (внутри объекта), из которого вызваны, элементы, передаваемые им в качестве параметров. append - в конце объекта, prepend - в начале
$("p").append(" Добавление в конце элемента.");
$("p").prepend("Добавление в начале элемента. ");
добавление нового элемента
var para = $("<p>", {
"text":"Это новый абзац с синим фоном",
"css":{"background":"blue"}
});
$("body").prepend(para);
.appendTo() и .prependTo() - присоединяют к объекту как и предыдущие методы, но позволяют сразу выбрать к какому элементу присоединять новый
$("<p>", {
"text":"Это новый абзац с .prependTo",
"css":{"background":"yellow"}
}).prependTo("body");
.after() и .before() аналогичны .append() и .prepend(), но добавляют не внутри элемента, а после него или перед ним
$("p.foo").after("<p>Новый абзац после элемента.</p>");
$("p.foo").before("Новый абзац после элемента");
.insertAfter() и .insertBefore() аналогичны .appendTo() и .prependTo() - сокращенный вариант написания кода
$("<p>", {
"text":"Это новый абзац с .prependTo",
"css":{"background":"red"}
}).insertBefore("label");
.wrap() создает обертку для элементов - синтаксис достатточно ссвободен, все три варианта можно использовать
$("span").wrap("<strong>");
$("span").wrap("<strong/>");
$("span").wrap("<strong></strong>");
//возможна вложенность элементтов в обертке
$("span").wrap("<strong><em></em></strong>");
чтобы воспользоваться функцией обратного вызова для генерации требуемого дескриптора HTML, котороым должен быть окружен элемент, нужно возвратить из нее этот дескриптор. Например, чтобы окружить вссе элементы span с классом foo дескрипторами strong, а все остальные элементы span - дескрипторами em, используем следующий код
$("span").wrap(function(){
return $(this).is(".foo") ? "<strong>" : "<em>";
});
.unwrap() удаляет ближайший родительский элемент
$("span").unwrap();
.wrapAll() группирует все элементы (с перемещением их к первому элементу) и создает вокруг них общую оболочку
var div = $("<div>", {
"css":{"background-color":"yellow"}
});
$("p").wrapAll(div);
$("span").wrapAll("<strong />");
.wrapInner() заключает в оболочку не сам элемент, а его содержимое
$("p").wrapInner("<em />")
.remove() и .detach() - удаляют элемент, .remove() - безвозвратно, .detach() сохраняет данные, что позволяет в последующем подсоединить удаленный элемент к DOM в другой точке
$("p").remove(); //удалит все параграфы
$("p").remove(".foo"); //удалит все параграфы с классом .foo
Пример с сохранением инфы:
ассоциируем данные с первым абзацем, удаляем абзац, присоединяем удаленный элемент и читаем данные в консоли
$("p:first").data("test","Это теcтовые данные");
var p = $("p:first").detach();
console.log("Сохраненные данные: "+p.data("test"));
Примечание: console.log в принципе можно переопределить или удалить, так как это объект. Пример:
console.log = function( p ){alert ( p )};
console.log("Привет");