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 相关文章推荐
Javascript 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
Aug 24 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
React Router基础使用
Jan 17 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 Javascript
原生js实现简单轮播图
Oct 26 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
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
php读取纯真ip数据库使用示例
2014/01/26 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
Chrome Web App开发小结
2014/09/04 PHP
php中stdClass的用法分析
2015/02/27 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
综艺节目策划方案
2014/06/13 职场文书
大学生个人求职信例文
2014/07/07 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
2014年文员工作总结
2014/11/18 职场文书
2015年司法局工作总结
2015/05/22 职场文书
预备党员表决心的话
2015/09/22 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记