jQuery节点创建与属性的处理

最新推荐文章于 2021-02-25 14:49:07 发布

2_NARUTO_2

最新推荐文章于 2021-02-25 14:49:07 发布

阅读量532

点赞数

分类专栏： iQuery 文章标签： jquery

本文链接：https://blog.csdn.net/Little_Frog_Prince/article/details/72794284

版权

iQuery 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

创建元素节点：
可以有几种方式，后面会慢慢接触。常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来

$("<div></div>")

创建为本节点：
与创建元素节点类似，可以直接把文本内容一并描述

$("<div>我是文本节点</div>")

创建为属性节点：
与创建元素节点同样的方式

$("<div id='test' class='aaron'>我是文本节点</div>")

$("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")

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

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .left,
    .right {
        width: 300px;
        height: 120px;
    }

    .left div,
    .right div {
        width: 100px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }

    .left div {
        background: #bbffaa;
    }

    .right div {
        background: yellow;
    }
    </style>
</head>

<body>
    <h2>动态创建元素节点</h2>
    <button>点击通过jQuery动态创建元素节点</button>
    <script type="text/javascript">
    var $body = $('body');
    $body.on('click', function() {
        //通过jQuery生成div元素节点
        var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
        $body.append(div)
    })
    </script>
</body>

</html>

2_NARUTO_2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery节点创建与属性的处理

创建元素节点：可以有几种方式，后面会慢慢接触。常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来$("<div></div>")创建为本节点：与创建元素节点类似，可以直接把文本内容一并描述$("<div>我是文本节点</div>")创建为属性节点：与创建元素节点同样的方式$("<div id='test' class='aaron'>我是文本节点</div>")$("<div
复制链接

扫一扫