在jQuery中，對於創建節點，我們都是先用“$()方法”來創建一個節點，然後再通過append()、before()等方法把新創建的節點插入現有的節點中。
語法：
var e = $(html); $().append(e);
說明：
$(html)中的html指的是“HTML標簽字符串”。
append()方法表示向所選元素內部的“末尾”插入內容。對於append()方法，我們在下一節“jQuery插入節點”會詳細給大家介紹。
舉例1：創建簡單節點
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
var $li = "<li></li>";
$("ul").append($li);
})
})
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<input id="btn" type="button" value="添加"/>
</body>
</html>
在浏覽器預覽效果如下：
分析：
當我們點擊“添加”按鈕，會往ul元素內部的“末尾”添加一個li元素。
在這裡，我們使用一個變量$li來存儲$("<li></li>")。大家注意一個變量命名規范，對於jQuery創建的節點，我們變量命名都習慣使用“$”開頭，以表示這是一個jQuery對象。
舉例2：創建復雜節點
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
//注意對於復雜節點本身的屬性就有雙引號，所以我們這裡使用單引號括起來
var $li = '<li><a href="http://www.lvyestudy.com" target="_blank" title="歡迎來到 學習網"> 學習網</a></li>';
$("ul").append($li);
})
})
</script>
</head>
<body>
<ul>
<li><a href="http://www.lvyestudy.com" target="_blank" title="歡迎來到 學習網"> 學習網</a></li>
<li><a href="http://www.lvyestudy.com" target="_blank" title="歡迎來到 學習網"> 學習網</a></li>
<li><a href="http://www.lvyestudy.com" target="_blank" title="歡迎來到 學習網"> 學習網</a></li>
</ul>
<input id="btn" type="button" value="添加"/>
</body>
</html>
在浏覽器預覽效果如下：
分析：
由於復雜節點的屬性與屬性值之間用的是雙引號（如target="_blank"），因此我們構造HTML字符串的時候，最外面就不應該用雙引號而是用單引號了。關於雙引號和單引號的使用，請參考JavaScript入門教程中的“JavaScript基本數據類型”這一節。對於這些基本語法，jQuery和JavaScript是共通的，畢竟jQuery本身就是用JavaScript寫的。
jQuery只需要使用“字符串”形式就能輕松創建任何復雜節點。學過JavaScript的同學都知道，jQuery這種創建節點的方式遠遠比JavaScript創建節點的方式更加方便直觀。我們可以回去翻翻“JavaScript創建節點”這一節，然後跟jQuery創建節點的方式對比一下，體會一下jQuery的強大並且加深記憶。