<jQuery>. 十二. 节点操作(添加节点, 删除节点, 克隆节点, 清空节点)

转载于 2018-01-11 18:00:00 发布 · 63 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ZeroHour/p/8269727.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用jQuery进行DOM元素动态创建、追加、清空及事件绑定的例子。通过这个示例，读者可以了解如何在网页中动态地添加链接，并为页面元素添加点击事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div>
    <p>1111</p>
    <p>2222</p>
    <!--<a href="http://web.itcast.cn" target="_blank">itcast</a>-->
</div>
<span>我是外面的span</span>
<script src="jquery-3.2.1.js"></script>
<script>
    $(function () {
        // 动态创建节点
        var $a = $("<a href='http://www.baidu.com' target='_blank'>RayLee</a>");
        $("div").append($a);

        // 清空节点, 清理门户
        $("div").empty();

        // 删除节点
        // $("div").remove();

        // 添加事件
        $("span").click(function () {
            alert("span");
        })

        // 克隆节点 true 带事件的复制, false 默认的复制, 不带事件的复制
        $("span").clone(true).appendTo("div");
    });
</script>
</body>
</html>