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("Привет");