JavaScript实现添加、查找、删除元素
代码很简单，这里就不多废话了。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="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:5px0px;
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;
}
.replyButtoninput{
font-size:12px;
}
#cancelButton{
visibility:hidden;
}
</style>
</head>
<body>
<divclass="reply">
<divclass="infoArea">
<divclass="words"><ahref="">中央情报局</a>:中央情报局</div>
<divclass="time">2014年5月4日21:56</div>
<divclass="replyButton">
<inputtype="button"id="submitButton"value="回复"onClick="showReplyArea(this)"/>
</div>
<divclass="replyButton">
<inputtype="button"id="cancelButton"value="取消"onClick="hideReplyArea(this)"/>
</div>
</div>
</div>
<script>
//显示文本框的函数
functionshowReplyArea(src)
{
inputText=document.createElement("DIV");
inputText.className="inputText";
inputText.style.width='100%';
inputText.style.height='75px';
inputText.style.margin='3px0';
inputText.style.cssFloat='left';
vargrandfather=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;
}
//隐藏文本框的函数
functionhideReplyArea(src)
{
vargrandfather=src.parentNode.parentNode.parentNode;
varinputText=grandfather.getElementsByClassName('inputText').item(0);
grandfather.removeChild(inputText);
cancelButton=src;
cancelButton.style.visibility='hidden';
submitButton=grandfather.getElementsByTagName("INPUT").item(0);
submitButton.disabled=false;
}
//下面为调试时测试用函数，做完后就没用了，但也是很经典的一段代码，就留在这里了。
functionshowNode()
{
vari=4;
submitButton=document.getElementById('submitButton');
i=submitButton.parentNode.parentNode.getElementsByTagName("INPUT").item(1).value;
alert(i);
}
</script>
</body>
</html>
示例二：
window.onload=function(){
vargaga=document.getElementById("gaga");
addClass(gaga,"gaga1")
addClass(gaga,"gaxx");
removeClass(gaga,"gaga1")
removeClass(gaga,"gaga")
functionhasClass(elements,cName){
return!!elements.className.match(newRegExp("(\\s|^)"+cName+"(\\s|$)"));//(\\s|^)判断前面是否有空格（\\s|$）判断后面是否有空格两个感叹号为转换为布尔值以方便做判断
};
functionaddClass(elements,cName){
if(!hasClass(elements,cName)){
elements.className+=""+cName;
};
};
functionremoveClass(elements,cName){
if(hasClass(elements,cName)){
elements.className=elements.className.replace(newRegExp("(\\s|^)"+cName+"(\\s|$)"),"");//replace方法是替换
};
};
};
以上所述就是本文的全部内容了，希望大家能够喜欢。