这篇文章主要汇总介绍了JavaScript实现添加、查找、删除元素的方法，十分的简单实用，有需要的小伙伴可以参考下。

代码很简单，这里就不多废话了。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 !DOCTYPE html meta charset=utf-8 title测试文件/title style .reply { width: 500px; height: 100%; overflow: hidden; background-color:#CCC; margin-top: 10px; } .infoArea { width: 380px; height: 100%; overflow: hidden; } .words { width: 380px; height: auto; margin: 5px 0px; float: left; font-size: 14px; } .time { margin-left: 10px; margin-bottom: 3px; width: 150px; height: 20px; line-height: 20px; float: left; font-family: 楷体; font-size: 14px; color: #999; } .replyButton { width: 60px; height: 20px; float: left; margin-bottom: 10px; } .replyButton input { font-size: 12px; } #cancelButton { visibility: hidden; } /style /head div class=reply div class=infoArea div class=wordsa href=中央情报局:中央情报局 div class=time2014年5月4日21:56 div class=replyButton input type=button id=submitButton value=回复 onClick=showReplyArea(this) div class=replyButton input type=button id=cancelButton value=取消 onClick=hideReplyArea(this) script //显示文本框的函数 function showReplyArea(src) { inputText = document.createElement(DIV inputText.className = inputText inputText.style.width = '100%'; inputText.style.height = '75px'; inputText.style.margin = '3px 0'; inputText.style.cssFloat = 'left'; var grandfather = src.parentNode.parentNode.parentNode; grandfather.appendChild(inputText); form1 = document.createElement(FORM form1.action = ; form1.method = post inputText.appendChild(form1); inputTextArea = document.createElement(TEXTAREA inputTextArea.style.width = '380px'; inputTextArea.style.height = '40px'; inputTextArea.style.marginLeft = '60px'; inputTextArea.style.marginTop = '3px'; inputTextArea.style.cssFloat = 'left'; inputTextArea.style.resize = 'none'; textSubmit = document.createElement(INPUT textSubmit.type = 'submit'; textSubmit.value = '提交'; textSubmit.style.marginLeft = '80px'; textSubmit.style.cssFloat = 'left'; form1.appendChild(inputTextArea); form1.appendChild(textSubmit); cancelButton = grandfather.getElementsByTagName(INPUT).item(1); cancelButton.style.visibility = 'visible'; submitButton = src; submitButton.disabled = true; } //隐藏文本框的函数 function hideReplyArea(src) { var grandfather = src.parentNode.parentNode.parentNode; var inputText = grandfather.getElementsByClassName('inputText').item(0); grandfather.removeChild(inputText); cancelButton = src; cancelButton.style.visibility = 'hidden'; submitButton = grandfather.getElementsByTagName(INPUT).item(0); submitButton.disabled = false; } //下面为调试时测试用函数，做完后就没用了，但也是很经典的一段代码，就留在这里了。 function showNode() { var i = 4; submitButton = document.getElementById('submitButton'); i = submitButton.parentNode.parentNode.getElementsByTagName(INPUT).item(1).value; alert(i); } /script /body /html

示例二：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 window.onload = function(){ var gaga = document.getElementById( gaga addClass( gaga,gaga1 ) addClass( gaga,gaxx removeClass( gaga,gaga1 ) removeClass( gaga,gaga ) function hasClass( elements,cName ){ return !!elements.className.match( new RegExp( (s|^) + cName + (s|$) // ( s|^ ) 判断前面是否有空格 （s | $ ）判断后面是否有空格 两个感叹号为转换为布尔值 以方便做判断 }; function addClass( elements,cName ){ if( !hasClass( elements,cName ) ){ elements.className += + cName; }; }; function removeClass( elements,cName ){ if( hasClass( elements,cName ) ){ elements.className = elements.className.replace( new RegExp( (s|^) + cName + (s|$) ), // replace方法是替换 }; }; };

以上所述就是本文的全部内容了，希望大家能够喜欢。

【JavaScript实现添加、查找、删除元素】相关文章：

★ 用JavaScript实现页面重定向功能的教程

★ JavaScript实现DIV层拖动及动态增加新层的方法

★ javascript实现日期按月份加减

★ javascript实现表格增删改操作实例详解

★ Javascript实现div层渐隐效果的方法

★ javascript实现Table排序的方法

★ JavaScript实现添加、查找、删除元素

★ JavaScript里实用的原生API汇总

★ JavaScript实现仿网易通行证表单验证

★ JavaScript实现表格点击排序的方法