`
minh456
  • 浏览: 63877 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

js 动态添加 复制 删除 相同div层

    博客分类:
  • JS
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>金男玉女-宝啊网-www.baoa.net </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=7" />
<meta name="description" content="不需要闭月羞花的天使面貌,不需要杨柳细腰的魔鬼身材,只要你身材比例均匀,只要你喜欢在镜头前展示自己,只要你怀抱梦想热爱生活,我们会提供各式各样的时尚服饰供你试穿,用镜头拍摄下你最美最有自信的一面Try your best,快点加入成为我们专属的试衣天使吧!mh" />

//js  CODE:

<script>
function insert(){
    var thenew= document.createElement('li');     
    var numid= document.getElementById('ah_mh').innerHTML;
    document.getElementById('addDefault'+numid).style.display='none';
    if(document.getElementById('removeDefault'+numid)){
        document.getElementById('removeDefault'+numid).style.display='none';
    }
    var numid=parseInt(numid)+1;
   
    document.getElementById('ah_mh').innerHTML=numid;
   
    thenew.innerHTML='上传照片'+numid+':<input type="file" name="attach" size="25" style="padding:10px;" /> <span id="localfile"></span><a href="javascript:void(0);" onclick="insert();" id="addDefault'+numid+'">添加</a> &nbsp;<a href="javascript:void(0);" onclick="remove();" id="removeDefault'+numid+'">删除</a>'; 
    document.getElementById('s').appendChild(thenew);
}
function remove()
{
    var numid= document.getElementById('ah_mh').innerHTML;
    if(parseInt(numid)<=3){
        var numid=3;
        document.getElementById('addDefault'+numid).style.display='';
        document.getElementById('ah_mh').innerHTML=numid;     
        document.getElementById('s').removeChild(document.getElementById('s').childNodes.item(numid));
    }else{
        var numid=parseInt(numid)-1;
        document.getElementById('addDefault'+numid).style.display=''; 
        document.getElementById('ah_mh').innerHTML=numid;     
        document.getElementById('s').removeChild(document.getElementById('s').lastChild);
        document.getElementById('removeDefault'+numid).style.display='';
       }
}
</script>


</head>

<body>

//HEML CODE:

<ul> 

<li>上传照片1:<input type="file" name="attach" size="25" style="padding:10px;" /> <span id="localfile"></span></li>
  <li>上传照片2:<input type="file" name="attach" size="25" style="padding:10px;" /> <span id="localfile"></span></li>
  <li >上传照片3:<input type="file" name="attach" size="25" style="padding:10px;" /> <span id="localfile"></span><a href="javascript:void(0);" onclick="insert();" id="addDefault3">添加</a></li>
        <div style="height:auto; overflow:hidden;" id="s"></div>//容器层
        <span id="ah_mh" style="display:none;">3</span>//计数标签

</ul>
</body>
</html>
分享到:
评论

相关推荐

    复制、删除并拖动div

    在JavaScript的帮助下,我们可以赋予 `div` 更多动态交互的能力,比如拖动、复制和删除。 1. **复制 `div`**:在JavaScript中,我们可以利用`cloneNode()`方法来复制一个 `div` 元素。这个方法会创建一个与原元素...

    JavaScript知识点个人总结

    在JavaScript中,DOM(Document Object Model)是一种标准的表示HTML和XML文档的接口,它允许程序和脚本动态更新、添加、删除以及遍历文档结构。DOM的核心是节点树,每个节点都有自己的类型和特性。这里我们将深入...

    程序天下:JavaScript实例自学手册

    1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 ...

    《程序天下:JavaScript实例自学手册》光盘源码

    1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 ...

    JavaScript网页特效范例宝典源码

    实例279 动态移动的层 437 实例280 在页面中显示十字光标 438 第10章 状态栏特效 441 10.1 状态栏文字动画 442 实例281 使状态栏中的文字不停闪烁 442 实例282 文字从右向左依次弹出 443 实例283 文字从中间向两边...

    JavaScript实现自动生成网页元素功能(按钮、文本等)

    克隆是复制一个已有的节点,创建一个与原节点相同的新节点。使用`cloneNode()`方法可以实现这一点。 示例代码未在内容中直接给出,但通常的用法如下: ```javascript function clone() { var elementToClone = ...

    超实用的jQuery代码段

    1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 1.20 设置Flash对象的WMode窗口模式 1.21 实现类Twitter的字数限制效果 1.22 ...

    JQuery基础.pdf

    // 添加复制的元素到 body $('body').append(clonedA); ``` 通过以上示例可以看出,JQuery 提供了更为简洁且易于使用的 API,极大地简化了日常的网页开发工作,使得开发者能够更专注于应用逻辑的实现。

    DOM(二).pdf

    在JavaScript中,我们可以利用DOM接口来操作这些节点,实现对网页的动态交互。 一、节点基础 节点是DOM的核心概念,它们代表了HTML文档中的每个部分。一个节点通常有三个基本属性:nodeType表示节点类型,nodeName...

    jquery实现输入框动态增减的实例代码

    在网页中动态添加和删除输入框是一个常见的需求,尤其是在表单处理中。通过编写jQuery脚本可以非常方便地实现这一功能。在上述代码中,通过绑定点击事件到提交按钮,当用户点击“再添加一个”按钮时,触发`addinput`...

    sublime快捷键

    7添加与删除注释ctrl+/ 8将光标移动到img或background-image标签上,按下ctrl+shift+u,Emmet会自动读取图片的尺寸并添加 9数学计算表达式,输入4*8再按ctrl+shift+y,Emmet能给出最终的结果 10将图片转换成data:URL...

    用JQUERY增删元素的代码

    它复制了表格的第一行内容,这是因为新行的内容结构与第一行相同。`remove_tr()`函数则删除最后一行,但首先检查表格是否只有一行,如果是,则弹出警告信息,因为不能删除最后一行。 代码中使用了jQuery的选择器和...

    jquery 选择器 描述

    - `$("div").siblings("input")`:选择与每个匹配的`&lt;div&gt;`元素有相同父元素的所有`&lt;input&gt;`兄弟元素。 #### 二、属性选择器 - `div[id]`:选择所有带有`id`属性的`&lt;div&gt;`元素。 - `div[id="value"]`:选择`id`...

    javascript cloneNode()方法的使用

    JavaScript通过DOM API能够操作这些节点,包括读取、修改、删除或添加节点等。 ### cloneNode()方法的用法 cloneNode()方法需要传入一个参数,该参数是一个布尔值,用来决定是否进行深度克隆: - 如果传入的参数...

    jsvalidation验证框架的使用实用.pdf

    1. **部署文件**:首先,你需要将`jsvalidation-framework.js`、`validation-config.xml`以及`validation-config.dtd`文件复制到你的项目目录下的合适位置,例如`/WebContent/js/`。请注意,`validation-config.dtd`...

    60个实用的jQuery代码片段.pdf

    【jQuery基础】jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画制作和Ajax交互。以下是从60个实用jQuery代码片段中提取的知识点: 1. **选择器与过滤**:`filter()`方法允许根据指定条件筛选元素...

    Jquery 基础学习笔记之文档处理

    在JQuery中,文档处理是其核心功能之一,允许开发者对HTML元素进行各种操作,包括添加、删除、复制、替换等。本文将详细讲解JQuery中的文档处理方法。 1. 内部插入: - `append(content)`:这个方法会在每个匹配的...

    2021-2022计算机二级等级考试试题及答案No.2580.docx

    不同包中的相同命名不会产生冲突,但如果想让包外的代码访问包内的类,需要使用适当的访问修饰符。 3. **Label控件**:Label控件通常用于GUI界面,显示静态文本信息。在提供的选项中,`text`是Label控件的属性,...

    jquery移动listbox的值原理及代码

    首先,我们要明白jQuery操作listbox的基本思想是通过JavaScript的DOM操作来选取、移动或删除listbox中的选项。在给定的例子中,我们有两个listbox,一个名为`listLeft`,另一个为`listRight`,以及两个按钮,`...

Global site tag (gtag.js) - Google Analytics