<!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>

JavaScript添加、查找、删除元素的一个实例的更多相关文章

  1. JavaScript向select下拉框中添加和删除元素

    JavaScript向select下拉框中添加和删除元素 1.说明 a   利用append()方法向下拉框中添加元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...

  2. javascript数组在指定位置添加和删除元素

    在JavaScript中,Array对象提供了一个强大的splice()方法,利用这个方法可以达到在数组的指定位置添加和删除元素的目的. 指定位置删除元素 要在指定位置删除元素,可以使用splice( ...

  3. 顺序表添加与删除元素以及 php实现顺序表实例

    对顺序表的操作,添加与删除元素. 增加元素 如下图所示  对顺序列表 Li [1328,693,2529,254]  添加一个元素 111 ,有三种方式: a)尾部端插入元素,时间复杂度O(1);  ...

  4. Arrays.asList () 不可添加或删除元素的原因

    Java中奖数组转换为List<T>容器有一个很方便的方法 Arrays.asList(T ... a),我通过此方法给容器进行了赋值操作,接着对其进行 添加元素,却发现会抛出一个(jav ...

  5. js进阶 9-11 select选项框如何动态添加和删除元素

    js进阶 9-11 select选项框如何动态添加和删除元素 一.总结 一句话总结: 二.js进阶 9-11 select选项框如何动态添加和删除元素 1.案例说明 2.相关知识 Select 下拉列 ...

  6. 4. 理解Update、Enter、Exit 与 添加、删除元素

    理解Update.Enter.Exit 与 添加.删除元素 在使用data()绑定数据时,例如:现在我们有一个数组[3,6,9,12,15],我们可以将数组每一项与一个<p>绑定,但是,现 ...

  7. jQuery_添加与删除元素

    一.jQuery添加元素(通过 jQuery,可以很容易地添加新元素/内容.) 1.添加新的 HTML 内容,用于添加新内容的四个 jQuery 方法(都能解析HTML标签): append() - ...

  8. （转载）php数组添加、删除元素的方法

    (转载)http://www.phpgs.com/html/php/phpjichu/20120130440.html 带来一篇php 数组 添加元素.删除元素的方法的文章,有需要的php学习者参考下 ...

  9. js数组添加或删除元素

    var arr = new Array(); arr[] = "aaa"; arr[] = "bbb"; arr[] = "ccc"; ar ...

随机推荐

  1. 树链剖分求LCA

    树链剖分中各种数组的作用: siz[]数组,用来保存以x为根的子树节点个数 top[]数组,用来保存当前节点的所在链的顶端节点 son[]数组,用来保存重儿子 dep[]数组,用来保存当前节点的深度 ...

  2. CentOS 6.5下Redis安装详细步骤

    Redis简介: Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从2010年3月15日起,Redis的开发工 ...

  3. 接口测试之webservice

    什么是Webservice Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML(标准通用标记语言下的一个子集)标准来描述.发布.发现.协调和配 ...

  4. 高效 Java Web 开发框架 JessMA v3.3.1 Beta-1 发布

    JessMA(原名:Portal-Basic)是一套功能完备的高性能 Full-Stack Web 应用开发框架,内置可扩展的 MVC Web 基础架构和 DAO 数据库访问组件(内部已提供了 Hib ...

  5. 在腾讯云上面搭建WordPress博客网站

    一.准备工作 我们使用腾讯云服务器来运行WordPress,腾讯云会给新用户七天的产品体验时间还有一些代金券,做为新手尝试成本是比较小的. 腾讯云长期举办 "云+校园" 活动,学生 ...

  6. servlet的开发流程介绍

    servlet的开发部署流程 1.在%TOMCAT_HOME%/webapps下WEB-INF的文件夹,写一个文件web.xml(该网站的配置信息),建立一个classes的子文件夹,也可以从别的目录 ...

  7. Quartz.NET开源作业调度框架系列(五):AdoJobStore保存job到数据库

    Quartz.NET 任务调度的核心元素是 scheduler, trigger 和 job,其中 trigger(用于定义调度时间的元素,即按照什么时间规则去执行任务) 和 job 是任务调度的元数 ...

  8. 20款美化网站的 jQuery Lightbox 灯箱插件

    jQuery Lightbox 灯箱插件可以让你为您的网站和应用程序展示优雅的图像,视频 和其它内容(使用模式窗口).如果你是一个开发人员,你必须拥有 jQuery 灯箱插件集合,因为有一部分的客户会 ...

  9. Method Draw – 很好用的 SVG 在线编辑器

    Method Draw 是一款在线 SVG 编辑器,是 SVG Edit 的一个分支.Method Draw 的目的是改进 SVG Edit 的可用性和用户体验.它移除了 line-caps/corn ...

  10. 【初探移动前端开发05】jQuery Mobile (下)

    前言 继续我们移动端的学习,今天到了List相关了. 本文例子请使用手机查看 List列表 在移动设备平台下,由于移动设备屏幕比较小,我们又是用手在上面点击的触屏方式,传统的列表模式在手机上就不太友好 ...