jQuery 创建元素的方法

最新推荐文章于 2024-02-07 13:23:17 发布

「已注销」

最新推荐文章于 2024-02-07 13:23:17 发布

阅读量3.3k

点赞数

本文链接：https://blog.csdn.net/m0_57835615/article/details/117827899

版权

通过jQuery，我们可以创建新的元素，并将它添加到页面上去。

示例：

（1）添加新段落

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../jQuery/jQuery.js"></script>
    <script>
        $(document).ready(function(){
            $(".one").click(function(){
                $("<p>我是新段落。</p>").appendTo($("body"));
            })
        })
    </script>
    <style>
        .one {
            width: 200px;
            font-size: 18px;
            font-weight: 700;
            background-color: rgba(62, 158, 24, 0.582);
        }
    </style>
</head>
<body>
    <p class="one">我是一个段落。</p>
</body>
</html>

点击该段落，将创建新的段落，并添加到页面中，如图：

（2）创建新的列表项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../jQuery/jQuery.js"></script>
    <script>
        $(document).ready(function(){
            $(".pre").click(function(){
                $("ul").append($("<li class='new'>列表项</li>"));
            })
        })
    </script>
    <style>
        .pre {
            font-size: 18px;
            color: blue;
            margin-bottom: 5px;
        }
        .new {
            font-size: 18px;
            color: green;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <ul>
        <li class="pre">列表项</li>
    </ul>
</body>
</html>

点击该列表项，将创建新的列表项并添加至ul元素的末尾处，如图：

「已注销」

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery 创建元素的方法

通过jQuery，我们可以创建新的元素，并将它添加到页面上去。示例：（1）添加新段落<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="../jQuery/jQuery.js"></script> <script> $(document).ready(function(){
复制链接

扫一扫