jquery Add Delete Dom element

1. Add DOM element append prepend before after

Append add a previous instance of the sibling element:

<div class= "header" ><p> add node after sibling element </p></div>

var pageup = ' <strong>append after the sibling element </strong><br> ';
$ ('. Header '). On (' click ', function () {
$ (this). Append (PageUp);
});

Prepend add an instance after the sibling element:

<div class= "section" ><p> add node element before sibling </p></div>

var pagedown = ' <strong>prepend before the sibling element </strong><br> '
$ ('. section '). On (' click ', function () {
$ (this). Prepend (PageDown);
});

Before add a node to the front of the selected element

var home = ' <p>before added before the specified element </p> ';

$ ('. Footer '). On (' click ', function () {
$ ('. Footer>strong '). before (home);
});

After adds a node after the element that is selected

var end = ' <p>after added after the specified element </p> '
$ ('. aside '). On (' click ', function () {
$ ('. Aside>strong '). After (end);
});

2. Remove the DOM element remove (delete) empty (empty)

Use Remove to delete a node

$ ('. Top '). On (' click ', function () {
$ (this). Remove ();
});

Emptying a node with empty

<div class= "Bottom" >
<p> Mouse out empty node </p>
<p> Mouse out empty node </p>
<p> Mouse out empty node </p>
<p> Mouse out empty node </p>
<p> Mouse out empty node </p>
</div>

$ ('. Bottom '). On (' click ', function () {
$ (this). empty ();
});

3. Selection of nodes

Chilren Select all child nodes
Parent Selects parents
Next Next node Nextall selects all subsequent elements
Prev Previous node Prevall selects all previous elements
Siblings filters out all sibling nodes, except for the current selected node

Closest quickly select parent node

Two levels of menu creation

<ul class= "List" >
<li>
<a href= "javascript:;" > Menu 1</a>
<nav>
<a href= "javascript:;" > Sub-menu 1</a>
<a href= "javascript:;" > Sub-menu 1</a>
<a href= "javascript:;" > Sub-menu 1</a>
</nav>
</li>
<li>
<a href= "javascript:;" > Menu 2</a>
<nav>
<a href= "javascript:;" > Sub-menu 2</a>
<a href= "javascript:;" > Sub-menu 2</a>
<a href= "javascript:;" > Sub-menu 2</a>
</nav>
</li>
<li>
<a href= "javascript:;" > Menu 3</a>
<nav>
<a href= "javascript:;" > Sub-menu 3</a>
<a href= "javascript:;" > Sub-menu 3</a>
<a href= "javascript:;" > Sub-menu 3</a>
</nav>
</li>
</ul>

var ListA = $ (' ul.list>li>a ');
Lista.next (). Hide ();
Lista.on (' click ', function () {
$ (this). Next (). Slidedown (). Parent (). siblings (). Children (). Next (). Slideup (1000);
$ (this). Next (). Show (). Parent (). siblings (). Children (). Next (). Hide ();
});
$ (' Ul.list>li '). On (' Blur ', function () {
Lista.next (). Hide ();
Console.log (' Lost Focus ');
});
})

jquery Add Delete Dom element