JavaScript实现动态添加、移除元素或属性的方法分析


Posted in Javascript onJanuary 03, 2019

本文实例讲述了JavaScript实现动态添加、移除元素或属性的方法。分享给大家供大家参考,具体如下:

JavaScript 动态添加、移除元素

appendChild(newnode)
向节点的子节点列表的末尾添加新的子节点。

insertBefore(newnode, existingnode)
在已有子节点之前插入新的子节点。

removeChild(node)
删除元素的某个指定的子节点,并以 Node 对象返回被删除的节点,如果节点不存在则返回 null。

innerHTML
属性设置或返回表格行的开始和结束标签之间的 HTML。

测试用例

<html>
  <head>
    <style type="text/css">
      .style1 { background-color:yellow; width:200px;height:100px;float:left;}
      .style2 { background-color:#aa0; width:200px;height:100px;float:left;}
      .style3 { background-color:rgb(0,200,200); width:200px;height:100px;float:left;}
      .item-style {background-color:pink;}
    </style>
    <script type="text/javascript">
      function addElement1() {
        var container = document.getElementById("container1");
        var elem1 = document.createElement("div");
        elem1.setAttribute("class", "item-style");
        var textnode1 = document.createTextNode("appendChild");
        elem1.appendChild(textnode1);
        container.appendChild(elem1);
        var middleChild = document.getElementById("middle-child");
        var elem2 = document.createElement("div");
        elem2.setAttribute("class", "item-style");
        var textnode2 = document.createTextNode("insertBefore");
        elem2.appendChild(textnode2);
        container.insertBefore(elem2, middleChild);
      }
      function addElement2() {
        var container = document.getElementById("container2");
        container.innerHTML = "<div>Hello World \"2\"</div>";
      }
      function removeNode() {
        var container = document.getElementById("container3");
        var myNode = document.getElementById("myNode");
        container.removeChild(myNode);
      }
      function operateElements() {
        addElement1();
        addElement2();
        removeNode();
      }
    </script>
  </head>
  <body onload="operateElements()">
    <div id="container1" class="style1">
      <div id="middle-child">Middle Child</div>
    </div>
    <div id="container2" class="style2"></div>
    <div id="container3" class="style3"><p id="myNode">Hello World</p></div>
    <div style="clear:both;"/>
    <button onclick="operateElements()">Operate Elements</button>
  </body>
</html>

 JavaScript实现动态添加、移除元素或属性的方法分析

JavaScript 动态添加、移除属性

setAttribute(attributename, attributevalue)
添加指定的属性,并为其赋指定的值。将属性设置为undefined等同于删除。

removeAttribute(attributename)
删除指定的属性。

getAttributeNode(attributename)
以 Attr 对象返回指定属性名的属性值。

removeAttributeNode(attributenode)
删除 Attr 形式指定的属性,同时返回被删除的Attr 形式的属性。

测试用例

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
      function operateAttributes() {
        var node2 = document.getElementById("node2");
        //设置font-style和font-size无效,这些属性脱离style单独设置是无效的
        node2.setAttribute("style", "color:red;");
        var node3 = document.getElementById("node3");
        node3.setAttribute("font-size", undefined);
        var node4 = document.getElementById("node4");
        //font-style和font-size的remove无效,因为它们没有单独存在
        node4.removeAttribute("font-size");
        var node5 = document.getElementById("node5");
        //无法获取font-style和font-size
        var attributeNode = node5.getAttributeNode("style");
        var attr = node5.removeAttributeNode(attributeNode);
        node5.innerHTML = "attr=" + attr + ", attr.name=" + attr.name + ", attr.value=" + attr.value;
      }
    </script>
  </head>
  <body onload="operateAttributes()">
    <p id="node0" style="font-style:italic;font-size:12px;">0 Hello World</p>
    <p id="node1" font-size="12px" font-style="italic">1 Hello World : font-size、font-style等,这些属性脱离style单独设置是无效的</p>
    <p id="node2" style="font-style:italic;font-size:12px;">2 Hello World setAttribute</p>
    <p id="node3" style="font-style:italic;font-size:12px;">3 Hello World setAttribute</p>
    <p id="node4" style="font-style:italic;font-size:12px;">4 Hello World removeAttribute</p>
    <p id="node5" style="font-style:italic;font-size:12px;">5 Hello World getAttributeNode & removeAttributeNode</p>
  </body>
</html>

JavaScript实现动态添加、移除元素或属性的方法分析

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js防止表单重复提交实现代码
Sep 05 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 #Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 #Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 #Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 #Javascript
发布一款npm包帮助理解npm的使用
Jan 03 #Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 #Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 #Javascript
You might like
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
小程序实现投票进度条
2019/11/20 Javascript
Python 列表list使用介绍
2014/11/30 Python
Python zip()函数用法实例分析
2018/03/17 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
python获取txt文件词向量过程详解
2019/07/05 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
python字典key不能是可以是啥类型
2020/08/04 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
params有什么用
2016/03/01 面试题
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
个人委托书范本
2014/04/02 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书