手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JavaScript实现添加、查找、删除元素
JavaScript实现添加、查找、删除元素
摘要:这篇文章主要汇总介绍了JavaScript实现添加、查找、删除元素的方法,十分的简单实用,有需要的小伙伴可以参考下。代码很简单,这里就不多废...

这篇文章主要汇总介绍了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实现页面重定向功能的教程

javascript实现可全选、反选及删除表格的方法

javascript去除空格方法小结

JavaScript里实用的原生API汇总

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

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

javascript实现动态改变层大小的方法

Javascript动态创建表格及删除行列的方法

JavaScript事件委托实例分析

精品推荐
分类导航