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

2022-03-13 本文已影响0人马佳乐

原生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>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width: 300px;
                height: 300px;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <input type="button" value="html()" id="btnHtml" />
        <input type="button" value="$()" id="btn1" />
        <div id="div1">
            <p>
                p1
                <span>span1</span>
            </p>
        </div>
    </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(父元素);把子元素作为父元素的最后一个子元素添加.