jQuery 操作html元素

1. 新增元素

動態新增html 元素是一個非常重要的功能。
jQuery可以非常方便的做這樣的事情：

$h1 = $('<h1>Hello</h1>') 
$(".info").append("<p>Stuff!</p>");
$(".info").prepend("<p>Stuff!</p>");
$('<p>Stuff!</p>').appendTo('.info');

用append，prepend，appendTo可以再元素間新增元素
利用before, after可以再元素內新增元素

2. 移動元素

var $paragraph = $("p"); // existing element
$("div").after($paragraph); // Move it!
// Same as:
$("div").after($("p"));

用 $("p") 選擇元素，然後把它移到div裡面

3. 移除元素

.empty()和.remove()方法實現了清空和刪除功能

$("div").remove();

4. 新增和移除 class

jQuery 利用.addClass()和.removeClass()新增和刪除元素上的class屬性

$('selector').addClass('className');
$('selector').removeClass('className');

.toggleClass()如果有則移除， 沒有則新增

5. 更改元素的屬性

.height()和.width() 可以更改元素的寬和高。

$("div").height("100px");
$("div").width("50px");

.css（） 可以新增css， 如：
$('div').css("border-radius", "10");

6. 改動元素的內容

可以使用.html(), .val（） 更改html元素的內容。

`<form name="checkListForm">
        <input type="text" name="checkListItem"/>
</form>`

var to add = $('input[name=checkListItem]').val();

7. 事件

$(document).on('click', '.item', function(){
$(this).remove();
});