JavaScript向div中添加数据，并删除的功能

最新推荐文章于 2022-11-11 16:13:25 发布
最新推荐文章于 2022-11-11 16:13:25 发布
阅读量3.2k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Luokaiqin520/article/details/79210003
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bom练习</title>
<script type="text/javascript">
function removeButM(){
var xx = document.getElementById("addM");
xx.remove();
}
function removeButY(){
var xx = document.getElementById("addY");
xx.remove();
}
function removeButS(){
var xx = document.getElementById("addS");
xx.remove();
}
function removeButYY(){
var xx = document.getElementById("addYY");
xx.remove();
}
function removeButT(){
var xx = document.getElementById("addT");
xx.remove();
}




function addButM(){
var oo = document.createElement("input")
oo.value="美术      ✖";
document.getElementById("addAll").appendChild(oo); 
oo.setAttribute("type","button");
oo.setAttribute("onclick","removeButM()");
oo.setAttribute("id","addM")
var div1 = document.getElementById("addAll");  
  div1.appendChild(oo); 
}
function addButY(){
var oo = document.createElement("input")
oo.value="语文     ✖";
document.getElementById("addAll").appendChild(oo); 
oo.setAttribute("type","button");
oo.setAttribute("onclick","removeButY()");
oo.setAttribute("id","addY")
var div1 = document.getElementById("addAll");  
  div1.appendChild(oo); 
}
function addButS(){
var oo = document.createElement("input")
oo.value="数学      ✖";
document.getElementById("addAll").appendChild(oo); 
oo.setAttribute("type","button");
oo.setAttribute("onclick","removeButS()");
oo.setAttribute("id","addS")
var div1 = document.getElementById("addAll");  
  div1.appendChild(oo); 
}
function addButYY(){
var oo = document.createElement("input")
oo.value="英语     ✖";
document.getElementById("addAll").appendChild(oo); 
oo.setAttribute("type","button");
oo.setAttribute("onclick","removeButYY()");
oo.setAttribute("id","addYY")
var div1 = document.getElementById("addAll");  
  div1.appendChild(oo); 
}
function addButT(){
var oo = document.createElement("input")
oo.value="体育      ✖";
document.getElementById("addAll").appendChild(oo); 
oo.setAttribute("type","button");
oo.setAttribute("onclick","removeButT()");
oo.setAttribute("id","addT")
var div1 = document.getElementById("addAll");  
  div1.appendChild(oo); 
}





</script>
</head>
<body>
<div style="width: 400px;height: 300px;" id="addAll">
<input type="button" value="美术      ✖" οnclick="removeButM()" id="addM"/>
<input type="button" value="语文      ✖" οnclick="removeButY()" id="addY"/>
<input type="button" value="数学      ✖" οnclick="removeButS()" id="addS"/>
<input type="button" value="英语      ✖" οnclick="removeButYY()" id="addYY"/>
<input type="button" value="体育      ✖" οnclick="removeButT()" id="addT"/>
</div>
<input type="button" value="美术" οnclick="addButM()"/>
<input type="button" value="语文" οnclick="addButY()"/>
<input type="button" value="数学" οnclick="addButS()"/>
<input type="button" value="英语" οnclick="addButYY()"/>
<input type="button" value="体育" οnclick="addButT()"/>

</body>
</html>
四夕520
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript基础教程第8版
06-12
书中从JavaScript语言基础开始，分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie，并在上一版的基础上新增了两章，讲述jQuery框架的基础知识。本书不仅介绍了基础知识和使用方法，也深入探讨...
用jquery在div中动态添加/删除元素
DHogan的博客
06-19 9522
$(document).ready(function(){ $("#append").click(function(){ var p = "This is append p";//添加元素的html代码 $("#div1").append(p); //调用append函数添加元素 }); $("#clear").click(function(){ var p
javaScript appendChild与removeChild添加、移除页面元素
wjxbj的博客
03-23 2113
        在JavaScript中使用appendChild()方法向页面元素中追加子对象和removeChild()方法从页面中移除对象，先看如下的HTML代码： &lt;body&gt; &lt;div id="nw"&gt;&lt;/div&gt; &lt;span id="ch"&gt;&lt;/span&gt; &lt;/body&gt;  
js 动态向DIV中填充数据
sdjnsyy的专栏
06-19 1万+
<br />今天下午考六级，看了一上午的作文，终于看完了10篇，现在写一下自己的博客。<br />从数据库当中读出数据来，然后用js 填充到Div快中。<br />其中前台的ＤＩＶ块为：<br /><div id="Div8" class="module listColor"><br />                    <div class="head"><br />                        <h4 id="H3" class="moduleHeader"><br />    
JS动态添加div，然后在div中添加元素
创造自我、追求无我
04-09 6万+
需求：    组织部中有个这样的需求，根据年份动态显示该年份下的定性指标！   我的做法：         先是放一个空的div，让后根据指标的数据，动态的往div中添加元素。 代码：  空的div，存放定性指标 动态往div中添加元素： for (var n = 0; n < data.length; n++) {
用js或者jquery动态给div追加内容，不覆盖之前的内容
热门推荐
林中明月间丶
03-19 9万+
效果：js <div id="append">ss</div> <script> var divA = document.getElementById("append"); divA.innerHTML = divA.innerText+'追加的内容s'; //divA.innerHTML +='追加的内容s'; divA.inn...
程序天下:JavaScript实例自学手册
07-08
9.36 使用JavaScript向表格中写入数据 9.37 类C# GridView的编辑效果（一） 9.38 类C# GridView的编辑效果（二） 第10章 单选框和复选框 10.1 选择了哪一个单选框 10.2 单击文字实现单选框的选定 10.3 被选中的复选...
JavaScript详解(第2版)
04-25
1.4　JavaScript及其在Web页面中的位置　3 1.5　Ajax是什么　5 1.6　JavaScript是什么样子的　6 1.7　JavaScript及其在Web开发中承担的角色　7 1.8　JavaScript和事件　9 1.9　标准化JavaScript和W3C　11 1.9.1　...
activeScroll.js:activeScroll.js 是一个 zepto 插件，用于处理长数据列表。它将从视图中移除 dom 并在返回视图时恢复它
07-13
滚出时它将从视图中删除 dom，并在滚回视图时恢复它们。这个怎么运作ActiveScroll.js 将完成以下工作： 1.为每页item创建一个wrap div 2.记录每一页的位置3.当用户滚出视图时，移除我们看不到的页面并使用占位符...
jQuery.removeData:扩展jQuery removeData也可以删除元素上的相应数据属性
05-03
（可选）删除元素上的相应数据属性（如果添加时不使用.data() ） 仅当值与选项中传递的值匹配时，才删除属性 要传递允许数据属性值包含data- 当前版本： 2.0.0 安装 在HTML文档中包括和jQuery.removeData.js 。 ...
动态添加div，并注入数据
aywfsy70619的博客
12-13 467
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="/context/mytags.jsp"%> <style type="text/css"> #main span{ mar...
JavaScript动态向表格添加数据
ChauncyWu的博客
01-23 3万+
利用javascript ，动态向表格中添加数据 1. 首先先写出表格的表头和主干部分 编号 姓名 职位 操作 2. 接下来就是网表格里面添加数据，这里用的是原生javascript //模拟一段JSON数据，实际要从数据库中读
js实现查找删除功能
m0_62173626的博客
07-12 501
查找删除功能.简单明了.通俗易懂
js 删除append标签添加的元素
内沐的博客
02-23 3万+
问题情境：通过append添加的元素（标签），每次执行这个js方法时，就会再次拼接，所以要进行判断，如果存在便删除。 这个问题本身并不复杂，但是我在写的时候短路了，$("#id") 我没有写引号，结果以为直接通过if($("#id") )判断是否存在不可行，于是便绕道而行，但虽费劲周折却也学到了很多知识，下面整理一下。 1，为了方便删除append添加的元素，应把要拼接的标签定义成一个jQue
在javaweb项目中用js来实现删除选中的功能
weixin_61189391的博客
11-11 879
在这个form表单标签中使用el表达式写上，删除选中的条目，就会跳转对应的删除类，在这里我们的删除选中按钮需要与选中框，有一个绑定的关系，并且删除需要有提示，不然会报错空指针异常，功能实现代码，如下图所示。3.我们是使用javaweb的知识实现项目数据的展示，把从数据库查询到的数据加载到jsp页面，利用的是标签库里的foreach标签来完成，下图是实现好的html页面。这些代码在上面的代码中都有，只是提取出来看的比较详细，用js实现选中一个全选的功能代码如下图所示。5.接下来实现删除选中的功能。
JS实现简单的表单增加删除功能
御晨风而归
04-09 9503
html部分： <div> <label for="">编号：</label><input type="text" id="txt1"> <label for="">姓名：</label><input type="text" id="txt2"> <label for="">住址：</lab...
JavaScript删除的功能
qq_30505673的博客
10-11 858
删除js提示 当点击删除超链接的时候，弹出对话框，如果确认就发送请求，如果取消，就不发送请求：代码如下： &lt;script type="text/javascript"&gt; $(".dels").click(function () { if(!confirm("是否确认删除？")){ return false ...
动态的添加文件上传框，并实现遍历和删除功能
最新发布
05-26
可以使用 HTML、JavaScript 和 jQuery 实现动态添加文件上传框，并实现遍历和删除功能。 首先，在 HTML 页面中创建一个上传文件的表单，包含一个添加按钮和一个容器用于显示上传文件框： ```html <div id=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值