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

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

<！DOCTYPE html><html><head><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><body><div class="reply"> <div class="infoArea"><div class="words"><a href="">中央情报局</a>:中央情报局</div><div class="time">2014年5月4日21:56</div><div class="replyButton"> <input type="button" id="submitButton" value="回复" onClick="showReplyArea（this）" /></div><div class="replyButton"> <input type="button" id="cancelButton" value="取消" onClick="hideReplyArea（this）" /></div> </div></div><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>

示例二：

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方法是替换 }; }; };

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