创建标签、添加元素、删除元素

最新推荐文章于 2023-09-07 09:58:22 发布

CHENww_

最新推荐文章于 2023-09-07 09:58:22 发布

阅读量255

点赞数

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/CHENww_/article/details/120934302

版权

一、创建元素（createElement）

HTML元素经常包含文本。创建指定文本的按钮你需要在按钮元素后添加文本节点:

<div class="box">
        <h3>标题文本</h3>
        <p>正文文本</p>
        <input type="text" id="userName" name="userName">
        <input type="button" value="按钮" id="btn">
    </div>
    <script>
        // 原生js
        // let aObj = document.createElement('a');
        // let dv=document.querySelector('.box');
        // let pObj=dv.getElementsByTagName('p')[0];
        // aObj.href='http://www.baidu.com';
        // aObj.innerText='百度'
        // dv.insertBefore(aObj,pObj);

        // jQuery
        let aObj=$('<a href="http://www.baidu.com">百度</a>');
        // 父元素.append(新建元素) ---> 末位追加
        $('.box').append(aObj)
    </script>

二、添加元素的一系列方法

 <div class="box">
        <h3>标题文本</h3>
        <p>正文文本1</p>
        <p>正文文本2</p>
        <input type="text" id="userName" name="userName">
        <input type="button" value="按钮" id="btn">
    </div>
    <script>
        let aObj=$('<a href="http://www.baidu.com">百度</a>');
        // 父元素.append(新建元素) ---> 末位追加
        // $('.box').append(aObj);
        // 新建元素.appendTo(父元素)  ---> 末位追加
        // aObj.appendTo($('.box'));

        // 父元素.prepend(新建元素) ---> 首位追加
        // $('.box').prepend(aObj);
        // 新建元素.appendTo(父元素)  ---> 首位追加
        // aObj.prependTo($('.box'));

        // 目标元素.before(新建元素)  ---> 在目标元素前添加
        // $('p:last').before(aObj);
        // 目标元素.after(新建元素)  ---> 在目标元素后添加
        $('p:last').after(aObj);
    </script>

三、删除元素

 <script src="引用js插件"></script>
    <script>
        $(function(){
            // html('')清空
            // $('.box').html('')
            // empty() 清空 ---> 谁调用清空谁
            // $('.box').empty()
            // remove() 删除 ---> 谁调用删除谁
            // $('#btn').remove()
            $('.box').remove()
        })
    </script>
<body>
    <div class="box">
        <h3>标题文本</h3>
        <p>正文文本1</p>
        <p>正文文本2</p>
        <input type="text" id="userName" name="userName">
        <input type="button" value="按钮" id="btn">
    </div>
</body>

CHENww_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
创建标签、添加元素、删除元素

一、创建元素（createElement）HTML元素经常包含文本。创建指定文本的按钮你需要在按钮元素后添加文本节点:<div class="box"> <h3>标题文本</h3> <p>正文文本</p> <input type="text" id="userName" name="userName"> <input type="button" value=
复制链接

扫一扫