jQuery动态创建元素及添加节点

原生js中创建节点方法：

document.write("<div></div>"); 可以打开标准流，添加元素，再关闭标准流。该方法慎用，可能会覆盖掉页面。
innerHTML("<div></div>"); 设置内容。如果内容包含标签，也会被解析出来。
document。createElement("div"); 该方法创建的标签只存在于内存中，如果想在页面上显示，需要使用appendChild();方法进行追加。

jQuery中如何创建节点呢?

方式一：html();

设置或获取内容

获取内容：html();不给参数

可以获取到元素的所有内容

设置内容：html();给参数

会把原来内容覆盖
如果内容中含标签，会解析出来
该方法和 innerHTML("<div></div>");类似

方式一：$();

能创建元素,但是创建的元素只存在于内存中,如果要在页面上显示,就要使用append();方法进行追加。
该方法和 document。createElement("div");类似

代码练习： 

<!DOCTYPE html>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width: 300px;
                height: 300px;
                border: 1px solid red;
        </style>
    </head>
        <input type="button" value="html()" id="btnHtml" />
        <input type="button" value="$()" id="btn1" />
        <div id="div1">
                <span>span1</span>
    </body>
</html>
<script src="js/jquery.js"></script>
<script>
    $(function(){
        $("#btnHtml").click(function(){
            //console.log($("#div1").html());
            //$("#div1").html("设置内容");
            $("#div1").html('设置内容1<a href="https://www.baidu.com">百度一下</a>');
        $("#btn1").click(function(){
            var $link=$('<a href="https://www.baidu.com">百度一下</a>');
            //追加节点
            $("#div1").append($link);
</script>

append();


父元素.append(子元素);子元素作为最后一个子元素添加到父元素


  • ①对于新建的元素，添加到父元素中，则直接添加到父元素的最后
    • 

  • ②对于页面中已经存在的元素，该方法会将子元素剪切，然后粘贴在父元素的最后。（不管该子元素是否属于该父元素）
    • 

    prepend();
    

    使用方法同上。只是该方法的作用是将子元素作为第一个子元素添加到父元素
    

    before();
    

    元素A.before(元素B);把元素B作为兄弟元素插入到元素A的前面
    

    after();
    

    使用方法同上。只是该方法的作用是把元素B作为兄弟元素插入到元素A的后面
    

    appendTo();
    

    子元素.appendTo(父元素);把子元素作为父元素的最后一个子元素添加.
    

    代码练习：
    

    <!DOCTYPE html>
        <meta charset="UTF-8">
        <title></title>
    </head>
        <input type="button" value="append" id="btnAppend" />
        <input type="button" value="prepend" id="btnPrepend" />
        <input type="button" value="before" id="btnBefore" />
        <input type="button" value="after" id="btnAfter" />     
        <input type="button" value="appendTo" id="btnAppendTo" />
        <ul id="ul1">
            <li>我是第一个li标签</li>
            <li id="li12">我是第二个li标签</li>
            <li>我是第三个li标签</li>
        <ul id="ul2">
            <li>我是第一个li标签2</li>
            <li id="li22">我是第二个li标签2</li>
            <li>我是第三个li标签2</li>
    </body>
</html>
<script src="js/jquery.js" ></script>
<script>
    $(function(){
        $("#btnAppend").click(function(){
            //新建一个li标签，添加到ul1中
            //var $liNew=$("<li>我是新创建的li标签</li>");
            //$("#ul1").append($liNew);
            //将ul1中存在的标签添加到ul1中
            var $li12=$("#li12");
            //$("#ul1").append($li12);
            //将ul2中存在的标签添加到ul1中
            var $li22=$("#li22");
            $("#ul1").append($li22);            
        $("#btnPrepend").click(function(){
            //新建一个li标签，添加到ul1中
            //var $liNew=$("<li>我是新创建的li标签</li>");
            //$("#ul1").prepend($liNew);
            //将ul1中存在的标签添加到ul1中
            var $li12=$("#li12");
            //$("#ul1").prepend($li12);
            //将ul2中存在的标签添加到ul1中
            var $li22=$("#li22");
            $("#ul1").prepend($li22);           
        $("#btnBefore").click(function(){
            var $divNew=$("<div>我是新创建的div</div>");
            $("#ul1").before($divNew);
        $("#btnAfter").click(function(){
            var $divNew=$("<div>我是新创建的div</div>");
            $("#ul1").after($divNew);
        $("#btnAppendTo").click(function(){
            //新建一个li标签，添加到ul1中
            var $liNew=$("<li>我是新创建的li标签</li>");