1.添加DOM元素 append prepend before after

//append 添加在同級元素的之前 實例：

<div class="header"><p>添加節點在同級元素之後</p></div>

var pageup = ‘<strong>append 在同級元素之後</strong><br>‘;
$(‘.header‘).on(‘click‘,function(){
$(this).append(pageup);
});

//prepend 添加在同級元素的之後 實例：

<div class="section"><p>添加節點元素在同級之前</p></div>

var pagedown = ‘<strong>prepend 在同級元素之前</strong><br>‘
$(‘.section‘).on(‘click‘,function(){
$(this).prepend(pagedown);
});

//before 在被選擇的元素的前面添加節點

var home = ‘<p>before 添加在指定元素之前</p>‘;

$(‘.footer‘).on(‘click‘,function(){
$(‘.footer>strong‘).before(home);
});

//after 在被選擇的元素的後面添加節點

var end = ‘<p>after 添加在指定元素之後</p>‘
$(‘.aside‘).on(‘click‘,function(){
$(‘.aside>strong‘).after(end);
});

2.刪除DOM元素 remove（刪除） empty（清空）

//使用remove來刪除節點

$(‘.top‘).on(‘click‘,function(){
$(this).remove();
});

//使用empty清空節點

<div class="bottom">
　<p>鼠標移出清空節點</p>
　　<p>鼠標移出清空節點</p>
　　<p>鼠標移出清空節點</p>
　　<p>鼠標移出清空節點</p>
　　<p>鼠標移出清空節點</p>
</div>

$(‘.bottom‘).on(‘click‘,function(){
　　　$(this).empty();
});

3.節點的選擇

//chilren 選取所有子節點
//parent 選取父節點
//next 下一個節點 nextAll選取所有之後的元素
//prev 上一個節點 prevAll選取所有之前的元素
//siblings 篩選出所有同輩節點，除了當前的選中的節點

//closest 快速選取父節點

//制作的二級菜單

<ul class="list">
　　<li>
　　　　<a href="javascript:;">菜單1</a>
　　　　　<nav>
　　　　　　<a href="javascript:;">子菜單1</a>
　　　　　　<a href="javascript:;">子菜單1</a>
　　　　　　<a href="javascript:;">子菜單1</a>
　　　　</nav>
　　</li>
　　<li>
　　　　<a href="javascript:;">菜單2</a>
　　　　<nav>
　　　　　　<a href="javascript:;">子菜單2</a>
　　　　　　<a href="javascript:;">子菜單2</a>
　　　　　　<a href="javascript:;">子菜單2</a>
　　　　</nav>
　　</li>
　　<li>
　　　　<a href="javascript:;">菜單3</a>
　　　　<nav>
　　　　　　<a href="javascript:;">子菜單3</a>
　　　　　　<a href="javascript:;">子菜單3</a>
　　　　　　<a href="javascript:;">子菜單3</a>
　　　　</nav>
　　</li>
</ul>

var ListA = $(‘ul.list>li>a‘);
ListA.next().hide();
ListA.on(‘click‘,function(){
// $(this).next().slideDown(1000).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(‘失去焦點‘);
　　});
})

jQuery添加刪除DOM元素