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保留小数点后几位的写法
Jan 03 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 Javascript
微信小程序视图template模板引用的实例详解
Sep 20 Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 Javascript
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 Javascript
js基于canvas实现时钟组件
Feb 07 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
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
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
python操作字典类型的常用方法(推荐)
2016/05/16 Python
Python 错误和异常代码详解
2018/01/29 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
python实现图书借阅系统
2019/02/20 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
迪拜航空官方网站:flydubai
2017/04/20 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
传播学毕业生求职信
2013/10/11 职场文书
驾驶员岗位职责
2014/01/29 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
员工合理化建议书
2014/05/19 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
新文化运动的基本口号
2014/06/21 职场文书
优秀护士事迹材料
2014/12/25 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
Pytest中conftest.py的用法
2021/06/27 Python
Python学习之异常中的finally使用详解
2022/03/16 Python