JavaScript&&jQuery创建新节点和操作属性对比

时间：2021-01-28 18:07:20

JavaScript创建新节点和操作属性

通过JavaScript原生接口创建节点，在处理上是非常复杂与繁琐的.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>练习</title>

    <!-- 用到的知识点:

        01...创建元素document.createElement

        02...设置属性addAttribute

        03...添加文本document.innerHTML

        04...加入文档appendChild

        05...给元素添加事件句柄document.addEventListener

        06...给节点添加类名className -->

        <style>

            .div1{

                width: 100px;

                height: 100px;

                background-color: pink;

            }

            .newdiv{

                width: 200px;

                height: 200px;

                background-color: blue;

            }

        </style>

</head>

<body>

    <div class="div1">点击此处区域会动态创建节点</div>

    <script>

        var body = document.querySelector("body")

        document.addEventListener("click",function(){

            var yuansu = document.createElement("div");

            yuansu.className="newdiv";

            yuansu.innerHTML = "这是创建出来的新的div";

            body.appendChild(yuansu);

        },false);

    </script>

</body>

</html>

jQuery创建新节点及操作属性

我们通过jQuery把上面的代码改造一下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>节点的创建与属性的处理</title>

    <script src="../jQuery库/jquery-3.3.1.js"></script>

    <!-- 用到的知识点:

        01...给元素添加事件句柄:on

        02...加入文档:append -->

    <style>

        .hello{

            width: 200px;

            height: 200px;

            background-color: pink;

        }

        .world{

            width: 100px;

            height: 100px;

            background-color: blue;

        }

    </style>

</head>

<body>

    <div class="hello">点击body区域可以动态创建节点</div>

    <script>

        $('body').on("click",function(){

            var div = $("<div class='world'>这是新的div</div>");

            $('body').append(div);

        })

    </script>

</body>

</html>

这就是jQuery创建节点的方式，让我们保留HTML的结构书写方式，非常的简单、方便和灵活

相关文章