JQuery:追加及删除

白沙王

于 2023-06-14 10:17:51 发布

阅读量247

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_50784508/article/details/131202243

版权

该代码示例展示了如何使用jQuery进行DOM操作，包括向元素(#divContainer)中追加内容，使用Append和AppendTo方法，清除所有子元素的Empty功能，以及完全移除元素的Remove函数。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="scripts/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            $('#btnAppend').click(function () {
                //动态创建jquery对象
                var hhh = $('<b>hello world </b>');
                //追加
                $('#divContainer').append(hhh);
            });
            $('#btnAppendTo').click(function () {
                //追加到
                $('<b>拍电影</b>').appendTo($('#divContainer'));
            });
            $('#btnEmpty').click(function () {
                //清空所有子元素
                $("#divContainer").empty();
            });
            $('#btnRemove').click(function () {
                $('#divContainer').remove();
            });
        });
    </script>
</head>
<body>
    <input id="btnAppend" type="button" value="Append" />
    <input id="btnAppendTo" type="button" value="AppendTo" />
    <input id="btnEmpty" type="button" value="Empty" />
    <input id="btnRemove" type="button" value="Remove" />
    <div id="divContainer">dasdasd</div>
</body>
</html>