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


Posted in Javascript onJuly 02, 2015

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

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

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

Javascript 相关文章推荐
文件编码导致jquery失效的解决方法
Jun 26 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
屏蔽相应键盘按钮操作
Mar 10 Javascript
使用时间戳解决ie缓存的问题
Aug 20 Javascript
jQuery的ready方法详解
Nov 27 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
多个js毫秒倒计时同时进行效果
Jan 05 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 #Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 #Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 #Javascript
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 #Javascript
javascript获取select值的方法分析
Jul 02 #Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 #Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 #Javascript
You might like
PHP字符串 ==比较运算符的副作用
2009/10/21 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
js禁止表单重复提交
2017/08/29 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Windows下安装python2.7及科学计算套装
2015/03/05 Python
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
Python编程之event对象的用法实例分析
2017/03/23 Python
python实现简单神经网络算法
2018/03/10 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
铭万公司.net面试题笔试题
2014/07/20 面试题
资产经营总监岗位职责范文
2013/12/01 职场文书
优秀的自荐信要注意哪些
2014/01/03 职场文书
法律进社区实施方案
2014/03/21 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
清洁员岗位职责
2015/02/15 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
大国崛起观后感
2015/06/02 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
创业计划书之美甲店
2019/09/20 职场文书
python垃圾回收机制原理分析
2022/04/13 Python