在jQuery中，我们可以使用字符串的形式来创建一个元素节点，然后再通过append()、before()等方法把这个字符串插入到现有的元素节点中。

语法：

//方式1
var str = "字符串";
$().append(str);
//方式2
$().append("字符串")

说明：

append()方法表示把一个新元素插入到父元素的内部子元素的“末尾”，这个方法我们在下一节中会详细介绍。

举例：创建简单元素

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                var $li = "<li>jQuery</li>";
                $("ul").append($li);
            })
        })
    </script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    <input id="btn" type="button" value="添加" />
</body>
</html>

默认情况下，预览效果如下图所示。

当我们点击【添加】按钮后，浏览器预览效果如下图所示。

分析：

当我们点击【添加】按钮，会往ul元素内部子元素的“末尾”添加一个li元素。

var $li = "<li>jQuery</li>";

上面这一句代码表示创建一个字符串，然后将字符串赋值给变量li。其中li只是一个变量名而已，当然你也可以命名为a、str_li等，都没关系。不过，大家要注意一个变量的命名规范，凡是对于jQuery创建的节点字符串，我们命名的时候都习惯使用“$”开头，以便区别于其他的变量。

举例：创建复杂元素

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                var $li = "<li><a href='http://www.lvyestudy.com'>绿叶学习网</a></li>";
                $("ul").append($li);
            })
        })
    </script>
</head>
<body>
    <ul>
        <li><a href="http://www.sina.com.cn">新浪</a></li>
        <li><a href="http://www.sohu.com">搜狐</a></li>
        <li><a href="http://www.163.com">网易</a></li>
    </ul>
    <input id="btn" type="button" value="添加" />
</body>
</html>

默认情况下，浏览器预览效果如下图所示。

当我们点击【添加】按钮后，此时预览效果如下图所示。

分析：

接触过JavaScript的小伙伴都知道，JavaScript创建节点的方式要比jQuery创建节点的方式要复杂得多。对于jQuery来说，不管要添加多么复杂的元素节点，使用字符串的形式就可以轻松实现，实在简单得不行！

此外小伙伴们可以思考一下：“对于上面这个例子，如果让你使用JavaScript实现，该怎么做呢？”然后我们对比一下JavaScript与jQuery的不同。