JS（DOM与JQuery） —div添加/删除元素

最新推荐文章于 2024-04-23 15:59:00 发布

原创最新推荐文章于 2024-04-23 15:59:00 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用DOM和JQuery进行元素的创建、添加、删除等操作，包括createElement、appendChild、removeChild等方法及append、prepend、empty等JQuery函数的应用。

一。DOM对元素的操作

1.需求：设置按钮，div中添加图片、文本框、超链接以及删除div中多有的元素

2.document对象方法：createElement()：动态创建元素

元素对象方法appendChild()：将新元素追加到末尾

元素对象方法insertBefore(新元素对象，原节点)：将新节点插入到某节点前

元素对象属性firstChild：获取第一个元素

元素对象属性childNodes：获取所有子节点元素

元素对象方法removeChild(子元素对象)：删除元素

3.代码实现：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        onload = function () {
            document.getElementById('btnImg').onclick = function () {
                var img = document.createElement('img');//创建img对象
                img.src = 'images/walk1.png';//通过属性src指定要显示的图片
                document.getElementById('divContainer').appendChild(img);//在div中追加图片对象
            };
            //追加文本框
            document.getElementById('btnText').onclick = function () {
                var input = document.createElement('input');//创建文本框对象
                input.type = "text";//设置属性
                document.getElementById('divContainer').appendChild(input);//在div中追加图片对象
            };
            //追加超链接
            document.getElementById('btnA').onclick = function () {
                var a = document.createElement('a');//创建a对象
                a.href = '评分—点击事件.html';
                a.innerHTML = '点击显示';
                //加入div中  
                document.getElementById('divContainer').appendChild(a);//在div中追加图片对象
            };
            //删除所有元素
            document.getElementById('btnRemove').onclick = function () {
                //获取所有子元素
                var childs = document.getElementById('divContainer').childNodes;
                //遍历，逐个删除
                for (var i = childs.length - 1; i >= 0; i--) {
                    document.getElementById('divContainer').removeChild(childs[i]);
                }
            };
        };
    </script>
</head>
<body>
    <input type="button" id="btnImg" value="图片" />
    <input type="button" id="btnText" value="文本框" />
    <input type="button" id="btnA" value="超链接" />
    <input type="button" id="btnRemove" value="删除所有元素" />
    <div id="divContainer"></div>
</body>
</html>

重点注意：对于<a></a>这种成对出现的标签，设置属性时，注意innerHTML。

二、JQuery 对元素的操作

创建元素：$('标签字符串')

添加元素：

append()，appendTo()：追加子元素

prepend()，prependTo()：前加子元素

after()，insertAfter()：后加兄弟元素

before()，insertBefore()：前加兄弟元素

动态删除元素

empty()：清空子元素

remove(selector)：删除当前元素，无参表示删除全部，有参表示删除符合条件的元素

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="scripts/jquery-1.7.1.min.js"></script>
    <script>
        $(function() {
            $('#btnAppend').click(function () {
                //动态创建jquery对象
                var fjx = $('<b>Jason</b>');
                //追加（看清顺序）
                $('#divContainer').append(fjx);
            });

            $('#btnAppendTo').click(function () {
                //追加到（看清顺序）
                $('<b>变瘦了</b>').appendTo($('#divContainer'));
            });

            $('#btnEmpty').click(function () {
                //清空所有子元素
                $('#divContainer').empty();
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btnAppend" value="Append"/>
    <input type="button" id="btnAppendTo" value="AppendTo"/>
    <input type="button" id="btnEmpty" value="Empty"/> 
    <div id="divContainer">发生了一件很机奇迹的事情：</div>
</body>
</html>

关于JS中DOM和JQuery文档操作就先写到这里，如果本篇博客对您所有帮助，记得点赞哦！