你的位置:首页 > Java教程

[Java教程]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>