方法
創建
格式：$(標籤對).(內容)
說明：標籤對可以直接寫，也可以用document.createElement()生成插入
內插
說明：在元素內部插入- 頭插
格式：$(選擇器).prepend(元素) - 尾插
格式：$(選擇器).append(元素)
- 頭插
外插
說明：在元素的外部插入前插
格式：$(選擇器).before(元素)後插
格式：$(選擇器).after(元素)
刪除
- remove()
說明：刪除被選元素及其子元素 - empty()
說明：刪除被選元素的子元素
- remove()
替換
replaceAll()
說明：替換元素
用法：$(新的元素).replaceAll(被替換的元素);replaceWith()
說明：替換內容
用法：$(被替換的元素).replaceWith(內容);
注：內容若是不加標籤，那麼標籤名相當於未定義，會顯示爲內聯元素；若是加上標籤基本等同於replaceAll
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery DOM</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var count = 0;
function createNode(){/*創建節點*/
var sign = document.createElement("p");
var txt = $(sign).text(count);
count += 1;
return txt;
}
$(function(){
$("#create_button").click(function(){/*創建*/
var sign = document.createElement($("#sign").val());
var content = $("#content").val();
var txt = $(sign).text(content);
$("#create_container").append(txt);
});
$("#head_insert").click(function(){/*頭插*/
var txt = createNode();
$("#boundary").prepend(txt);
});
$("#tail_insert").click(function(){/*尾插*/
var txt = createNode();
$("#boundary").append(txt);
});
$("#before_insert").click(function(){/*前插*/
var txt = createNode();
$("#boundary").before(txt);
});
$("#after_insert").click(function(){/*後插*/
var txt = createNode();
$("#boundary").after(txt);
});
$("#clear").click(function(){/*清空*/
var txt = createNode();
$("#boundary").empty();
});
$("#delete_button").click(function(){/*刪除*/
$("#remove_container p").remove();
});
$("#replace_element").click(function(){/*替換a元素*/
$("<h5>新的元素</h5>").replaceAll("#replace_container a");
});
$("#replace_content1").click(function(){/*替換p1內容*/
$("#replace_p1").replaceWith("新的內容");/*若是不加標籤，那麼標籤名相當於未定義，會顯示爲內聯元素*/
});
$("#replace_content2").click(function(){/*替換p2內容*/
$("#replace_p2").replaceWith("<h5>新的內容</h5>");/*加上標籤基本等同於replaceAll*/
});
});
</script>
</head>
<body>
<div id="create_container">
<h3>創建節點</h3>
<input id="sign" placeholder="請輸入標籤名" value=""></input><br/>
<input id="content" placeholder="請輸入內容" value=""></input><br/>
<input type="button" value="創建" id="create_button"></input>
</div>
<hr/>
<div id="insert_container">
<h3>插入節點</h3>
<input type="button" value="頭插" id="head_insert"></input>
<input type="button" value="尾插" id="tail_insert"></input>
<input type="button" value="指定前插" id="before_insert"></input>
<input type="button" value="指定後插" id="after_insert"></input>
<input type="button" value="清空p" id="clear"></input>
<div id="connect_container">
<div id="boundary" style="background-color:yellow;height:200px;width:200px;">*-分界區域-*</div>
</div>
</div>
<hr/>
<div id="remove_container">
<h3>刪除節點</h3>
<p>p1</p>
<a>a</a>
<p>p2</p>
<lable style="display:block">l1</lable><!-- 內聯元素轉換爲塊元素 -->
<input type="button" value="刪除所有p" id="delete_button"></input>
</div>
<hr/>
<div id="replace_container">
<h3>替換節點</h3>
<p id="replace_p1">p1</p>
<a>a</a>
<p id="replace_p2">p2</p>
<input type="button" value="替換a元素" id="replace_element"></input>
<input type="button" value="替換p1的內容" id="replace_content1"></input>
<input type="button" value="替換p2的內容" id="replace_content2"></input>
</div>
</body>
</html>
