Creating And Appending Content

---

In this lesson we are learn about some methods for add new elements in html page.

Append

Prepend

Append to

Prepend to

Insert before

Insert after

Before

After

Let see these methods with examples.

Adding content by using objects.

Insert After | Insert Before

After : Add particular exist element after than this.

Insert After :Create an new element and add after than this.

Moving the Elements

Move h1 element and place it after article portion

$('h1').appendTo('article');

Note: When we use appendTo with any existing element it starts moving where we put selector.

EQ method

$('p').eq(0).after($('h1'));

eq(0) is indicting to index or place of p element. Here 0 means move h1 tag to after first p child.

Return particular element

$('p').eq(0).after(function(){
return $(this).prev();
});

Parental control

$('span.co').each(function(){
return $(this).closest( 'p').prepend('Hi there');
});

Final Example

View Demo