小程序模板源码_JavaScript完成动态添加、移除元素或属性的方法分析

  • 栏目:公司新闻 时间:2021-01-08 10:40 分享新闻到:
<返回列表

JavaScript实现动态添加、移除元素或属性的方法分析       这篇文章主要介绍了JavaScript实现动态添加、移除元素的方法,结合实例形式分析了javascript针对页面元素动态添加、移除、设置等相关函数与使用技巧,需要的朋友可以参考下

本文实例讲述了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" 
 div id="middle-child" Middle Child /div 
 /div 
 div id="container2" /div 
 div id="container3" p id="myNode" Hello World /p /div 
 div / 
 button Operate Elements /button 
 /body 
 /html 

 

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" 0 Hello World /p 
 p id="node1" font-size="12px" font- 1 Hello World : font-size、font-style等,这些属性脱离style单独设置是无效的 /p 
 p id="node2" 2 Hello World setAttribute /p 
 p id="node3" 3 Hello World setAttribute /p 
 p id="node4" 4 Hello World removeAttribute /p 
 p id="node5" 5 Hello World getAttributeNode removeAttributeNode /p 
 /body 
 /html 

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《》

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


分享新闻到:

更多阅读

小程序模板源码_JavaScript完成动态添加、

公司新闻 2021-01-08
JavaScript完成动态性加上、清除原素或特性的方式剖析 本文关键详细介绍了JavaScript完成动...
查看全文

公众号答题小程序-潍坊站优化发来新消息

公司新闻 2021-01-08
滨州市站提升发过来新信息——信息内容小产品发布了!滨州市百度搜索企业为您解读下百度...
查看全文

广州凡科互联网科技股份有限公司招聘数

公司新闻 2021-01-08
招聘人数:13职位信息职责描述:1、负责数据模型的开发,维护,包括需求分析、模型设计、...
查看全文
返回全部新闻


区域站点: 南丰县长图制作   南宫市在线编辑图片   囊谦县图片加文字怎么制作   南和县怎样抠图   南华县长图制作   南江县在线编辑图片   南京市图片加文字怎么制作   南靖县怎样抠图   南康市长图制作   南乐县在线编辑图片   南陵县图片加文字怎么制作   南宁市怎样抠图   南平市长图制作   南皮县在线编辑图片   南市区图片加文字怎么制作   南通市怎样抠图   南投县长图制作   南雄市在线编辑图片   南溪县图片加文字怎么制作   南阳市怎样抠图   南漳县长图制作   南召县在线编辑图片   南郑县图片加文字怎么制作   那坡县怎样抠图   那曲县长图制作   纳雍县在线编辑图片   讷河市图片加文字怎么制作   内黄县怎样抠图   内江市长图制作   内丘县在线编辑图片   内乡县图片加文字怎么制作   嫩江市怎样抠图   聂荣县长图制作   尼玛县在线编辑图片   尼木县图片加文字怎么制作   宁安市怎样抠图   宁波市长图制作   宁城县在线编辑图片   宁德市图片加文字怎么制作   宁都县怎样抠图   宁国市长图制作   宁海县在线编辑图片   宁化县图片加文字怎么制作   宁晋县怎样抠图   宁陵县长图制作   宁明县在线编辑图片   宁南县图片加文字怎么制作   宁强县怎样抠图   宁陕县长图制作   宁武县在线编辑图片   宁乡市图片加文字怎么制作   宁阳县怎样抠图   宁远县长图制作   农安县在线编辑图片   磐安县图片加文字怎么制作   盘锦市怎样抠图   盘山县长图制作   磐石市在线编辑图片   盘州市图片加文字怎么制作   蓬安县怎样抠图   澎湖县长图制作   蓬莱市在线编辑图片   彭山县图片加文字怎么制作   蓬溪县怎样抠图   彭阳县长图制作   彭泽县在线编辑图片   彭州市图片加文字怎么制作   偏关县怎样抠图   平安县长图制作   平昌县在线编辑图片   平定县图片加文字怎么制作   屏东县怎样抠图   平度市长图制作   平果县在线编辑图片   平和县图片加文字怎么制作   平湖市怎样抠图   平江县长图制作   平乐县在线编辑图片   平凉市图片加文字怎么制作   平利县怎样抠图   平罗县长图制作   平陆县在线编辑图片   屏南县图片加文字怎么制作   平泉市怎样抠图   屏山县长图制作   平顺县在线编辑图片   平塘县图片加文字怎么制作   平潭县怎样抠图   平武县长图制作   萍乡市在线编辑图片   平乡县图片加文字怎么制作   平阳县怎样抠图   平遥县长图制作   平阴县在线编辑图片   平邑县图片加文字怎么制作   平远县怎样抠图   平舆县长图制作   皮山县在线编辑图片   普安县图片加文字怎么制作   浦北县怎样抠图   浦城县长图制作   普洱市在线编辑图片   普格县图片加文字怎么制作   浦江县怎样抠图   普兰县长图制作   普宁市在线编辑图片   莆田市图片加文字怎么制作   迁安市怎样抠图   乾安县长图制作   潜江市在线编辑图片   潜山市图片加文字怎么制作  

友情链接: 贴图软件 在线免费抠图 制作图片加文字的 在线一键抠图

Copyright © 2002-2020 图片加文字怎么制作_怎样抠图_长图制作_在线编辑图片_如何制作水印图片logo 版权所有 (网站地图) 备案号:粤ICP备10235580号