Динамическое создание элемента

$newDiv = $('<div />');

$newDiv.attr('id','new-div');

$('<span />') is just a different way of writing $('<span></span>')

//create a new link, using either syntax

$myNewLink = $('<a />');

//add a 'href' attribute of '/links' using .attr()

$myNewLink.attr('href','/links');

//set the html content of the link to 'click here!'

$myNewLink.html('click here!');

//set the class of the link to 'important'

$myNewLink.attr('class', 'important');

//code to add the link to the page... you'll

//learn to do this very soon!

$('body').append($myNewLink);

_____________________________________________________________________________________

.append()

$(".word-display").append ($("<span/>").addClass("shown-letter").text(' '));

Когда используется команда, в скобки создания нового элемента нужно заключать также и все её классы, значения и т.Д.

$('body').append($myNewLink);

Добавляет или перемещает содержимое, определяемое во входном параметре, в конец содержимого каждого элемента набора jQuery.

.append( source )

source – (строка | элемент | объект jQuery ) Строка с кодом разметки HTML, либо ссылка на существующий или созданный на лету DOM-элемент, либо набор jQuery.

.append( function( [index, html] ) )

function( [index, html] ) – (функция) Возвращает HTML строку, которая предназначена для вставки в конце существующего содержимого каждого элемента в наборе jQuery перед закрывающим тегом. В качестве входных параметров получает index (индекс, номер текущего элемента в наборе jQuery начиная с 0) и html (старое содержимое текущего элемента).

 Примечание:

Перемещаемое (вставляемое) функцией .append() содержимое становится последним дочерним элементом, каждого элемента набора jQuery. Для вставки в качестве первого дочернего элемента необходимо использовать jQuery функцию .prepend().

_____________________________________________________________________________________

Creating elements with Attributes

$('<img/'>,{ src : 'codecademy.com/logo', alt : 'codecademy logo' })

$myLink = $('<a />', {

href : '#home',

id : 'homeLink'

});

_____________________________________________________________________________________

Implicit Element Creation или Неявное создание элементов

//create a h1 with the class 'greeting'

//inside of the div with id 'header'

//(the message can be anything, or nothing, although thats lame)

$('#header').html('<h1 class="greeting">Hello!</h1>');

//create a div with the text contents

//'inner-div'

//inside of the div with id 'outer-div'

$('#outer-div').html('<div>inner-div</div>');

_____________________________________________________________________________________

.prependTo() и .appendTo()

The methods prependTo() and appendTo() insert the object on which they are called as the first and last child (respectively) of the element passed as an argument.

.prependTo() add as a first child .appendTo() add as a last child

$divToAppend.appendTo($divToInsertInside);

//append $divToAppend to $divToInsertInside

//using .appendTo

$divToPrepend.prependTo($divToInsertInside);

//prepend $divToPrepend to $divToInsertInside

//using .prependTo

_____________________________________________________________________________________

.append() и .prepend()

$e.append($x) has the same effect as $x.appendTo($e): $x gets inserted as the last child of $e

An additional difference is that append() can accept a string of HTML to implicity create elements, whereas appendTo can only take an element already on the page.

$divToInsertInside.append('<div class="appended">append</div>');

$divToInsertInside.prepend('<div class="prepended">prepend</div>');

_____________________________________________________________________________________

insertBefore() и insertAfter()

//insert $divToInsertBefore to $divToInsertAround

//using .insertBefore()

$divToInsertBefore.insertBefore($divToInsertAround);

//insert $divToInsertAfter to $divToInsertAround

//using .insertAfter()

$divToInsertAfter.insertAfter($divToInsertAround);

_____________________________________________________________________________________

.before() и .after()