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 相关文章推荐
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
jquery插件开发模式实例详解
Jul 20 jQuery
js 动态校验开始结束时间的实现代码
May 25 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
react 路由Link配置详解
Nov 11 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
php结合curl实现多线程抓取
2015/07/09 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
jquery重复提交请求的原因浅析
2014/05/23 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
pygame实现简易飞机大战
2018/09/11 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
python下载库的步骤方法
2019/10/12 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
优秀毕业生求职推荐信范文
2013/11/21 职场文书
婚前协议书范本
2014/10/27 职场文书
债务纠纷起诉书
2015/05/20 职场文书
解除处分决定书
2015/06/25 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python