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

Java脚本语言动态添加、移除元素

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

插入前（新节点，现有节点)在已有子节点之前插入新的子节点。

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

innerHTML属性设置或返回表格行的开始和结束标签之间的超文本标记语言。

测试用例

超文本标记语言标题样式类型=' text/CSS '。样式1 {底色：黄色；宽度宽度：200像素高度：100 pxfloat:left}。样式2 {底色： # aa0宽度宽度：200像素高度：100 pxfloat:left}。风格3 {底色： RGB(0，200，200)；宽度宽度：200像素高度：100 pxfloat:left}。项目风格{背景色：粉色；}/样式脚本类型='text/javascript '函数add element 1(){ var container=document。getelementbyid('容器1 ')；var elem 1=文档。创建元素(' div ')；elem1.setAttribute('class '，' item-style ')；var文本节点1=文档。createtext节点(' appendChild ')；elem 1。appendchild(文本节点1)；集装箱。appendchild(elem 1)；var middleChild=文档。getelementbyid(' middle-child ')；var elem 2=文档。创建元素(' div ')；elem2.setAttribute('class '，' item-style ')；var文本节点2=文档。createtext节点('在前面插入')；elem 2。appendchild(文本节点2)；container.insertBefore(elem2，middleChild)；}函数addelement 2(){ var container=document。getelementbyid('容器2 ')；集装箱。innerhtml=' DivHello World ' 2 '/div '；}函数removeNode(){ var container=document。getelementbyid('容器3 ')；var my node=document。getelementbyid('我的节点')；集装箱。移除子节点(我的节点)；} function operation elements(){ add element 1()；add element 2()；removeNode()；}/脚本/头体on load=' operateElements()' div id=' container 1 ' class=' style 1 ' div id=' middle-Child ' middle Child/div/div id=' container 2 ' class=' style 2 '/div id=' container 3 ' class=' style 3 ' p id=' my node ' hello World/p/div style=' clear : both；'/button onclick=' operation Elements()' operation Elements/button/body/html(9500 . 163.com)

Java脚本语言动态添加、移除属性

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

移除属性（属性名)删除指定的属性。

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

移除属性节点（属性节点)删除属性形式指定的属性，同时返回被删除的属性形式的属性。

测试用例

超文本标记语言头元http-equiv='内容-类型' Content=' text/html；charset=UTF-8 '脚本类型='text/javascript '函数operateAttributes(){ var node 2=document。getelementbyid('节点2 ')；//设置字体样式和字体大小无效，这些属性脱离风格单独设置是无效的node2.setAttribute('style '，' color : red ')；var节点3=文档。getelementbyid('节点3 ')；node3.setAttribute('font-size '，未定义);var节点4=文档。getelementbyid('节点4 ')；//字体样式和字体大小的移动无效，因为它们没有单独存在节点4。移除属性(' font-size ')；var节点5=文档。getelementbyid('节点5 ')；//无法获取字体样式和font-size var AttributeNode=node 5。GetAttributenode(' style ')；var attr=节点5。removeattributenode(属性节点)；node5.innerHTML='attr=' attr '，attr.name=' attr.name '，attr。value=' attr。价值；}/script/head body on load=' operateAttributes()' p id=' node 0 ' style=' font-style : italic；'font-size :12 px'0你好世界/p p id=' node 1 ' font-size=' 12px ' font-style=' italic ' 1你好世界：字体大小，字体样式等，这些属性脱离风格单独设置是无效的/p p id=' node 2 ' style=' font-style : italic；' font-size :12 px'2 Hello World setAttribute/p p id=' node 3 ' style=' font-style : italic；'font-size :12 px3 Hello World setAttribute/p p id=' node 4 ' style=' font-style :斜体；' font-size :12 px'4 Hello World移除属性/p p id='节点5 '样式=' font-style :斜体；'font-size :12 px5你好世界getAttributeNode removeAttributeNode/p/body/html(9501 . 163.com)

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

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript操作DOM技巧总结》 、 《JavaScript页面元素操作技巧总结》 、 《JavaScript事件相关操作与技巧大全》 、 《JavaScript查找算法技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript错误与调试技巧总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。