DOM & JS DIV层操作__创建，指定删除，全部删除

最新推荐文章于 2022-08-08 15:04:09 发布
最新推荐文章于 2022-08-08 15:04:09 发布
阅读量131 收藏
点赞数
分类专栏： html & Css 文章标签： JavaScript HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tianjun309/article/details/83765956
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Untitled Document</title>
		<script src="temp.js" type="text/javascript"></script>
	</head>
	<body>
		<div>
			<span>
				<input type="text" id="text" name="mytest"/>				
			</span>			
			<span>
				<input type="submit" value="add" id="submit" οnclick="addDIV(document.getElementById('text').value);"/>				
			</span>
			<span>
				<input type="submit" value="delete" id="submit" οnclick="deleteDIV(document.getElementById('text').value);"/>				
			</span>
		   <span>
				<input type="submit" value="delete" id="submit2" οnclick="deleteAllDIV();"/>				
			</span>
		<div>
			male<input type="radio"  name="nametest" value="good" checked="checked"/>
			female<input type="radio"  name="nametest" value="bad" />
		</div>
		<div>
			temp1<input type="checkbox"  name="nametest2" value="temp1" checked="checked"/>
			temp2<input type="checkbox"  name="nametest2" value="temp2" />
		</div>
		<div id="add">
			
		</div>
	</body>
</html>

 

function addDIV (addText) {
 /*创建新层*/  
 var div_view=document.createElement("div"); 
 var text = document.getElementById("add");
	div_view.id=addText;
	div_view.innerText=addText;
	text.appendChild(div_view);
}

function deleteDIV (id) {
 /*删除一个层*/ 
 var temp = document.getElementById(id);
 temp.parentNode.removeChild(temp);
}

function deleteAllDIV(){
    /*删除所有附加层*/
    var parent = document.getElementById("add");
	//这里因为childNodes节点会动态变下标，所以用0的index实现全部删除
    for (var i = 0, length= parent.childNodes.length; i < length; i++){
		parent.removeChild(parent.childNodes[0]);
	};
}
tianjun309
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
动态创建层与删除层，javascript写的，简单，适用
11-20
动态创建层与删除层，javascript写的，简单，适用
JavaScript之DOM插入更新删除_动力节点Java学院整理
10-19
【JavaScript DOM操作】DOM（Document Object Model）是用于表示网页或文档的一种标准，它使得我们可以通过JavaScript等脚本语言对网页内容进行动态操作。本文主要介绍JavaScript中的DOM插入、更新和删除操作。 **1...
项目练习--js操作删除DIV层中的子节点
伊人回眸泪倾城的博客
09-19 545
js实现删除div下所有子节点
DOM操作节点
Harley567
08-08 762
1.创建节点 2.查询获取节点 3.更新节点 4.添加节点 5.删除节点
js清除指定div的html,DOM & JS DIV层操作_创造，指定删除，全部删除
weixin_42493325的博客
06-24 607
DOM &amp; JS DIV层操作_创造，指定删除，全部删除Untitled Documentamp;$lt;/script&gt;malefemaletemp1temp2function addDIV(addText) {/*创建新层*/var div_view = document.createElement("div");var text = document.getElementByI...
js删除多层数组嵌套的最后一层中的部分数据
MYG_G
07-01 2223
我想删除arr中，第二个对象里面的aList中的{id:153,name: daad}的元素。 const arr = [ { id: 1, name: 'llaq', aList: [ { id: 20, name: 'hdka', }, { id: 12, name: 'loqas', }, ] }, { id: 2, nam
htmlDOM.rar_DOM_HTML DOM_HTML dom_HTMLD_w3c htmld
最新发布
09-24
通过DOM，你可以使用JavaScript等脚本语言来操作这些节点。例如，你可以： - 查找特定元素：使用`getElementById()`, `getElementsByTagname()`, `querySelector()`等方法。 - 创建新的元素：使用`createElement()`...
JS常见DOM节点操作示例【创建 ，插入，删除，复制，查找】
10-18
DOM允许开发者通过JavaScript来操作这些节点，从而实现对网页内容的动态更新。以下是一些关于DOM节点操作的关键知识点： 1. **创建节点**： - `createElement(tagName)`：这个方法用于创建一个新的HTML元素节点，...
JS实现DOM删除节点操作示例
11-29
在JavaScript中，DOM...总结，JavaScript的DOM操作是网页动态效果和交互实现的关键，而`removeChild()`方法则是删除文档中特定节点的重要工具。通过熟练掌握这一方法，开发者可以创建出更加丰富和灵活的用户界面。
JS DOM删除元素
qq_46275230的博客
04-17 6096
JS DOM删除元素 A.removeChild(B) 在元素A中移除元素B &lt;body&gt; &lt;div class="wrap"&gt; &lt;p class="one"&gt;张三 &lt;/p&gt; &lt;/div&gt; &lt;span&gt;王五&lt;/span&gt; &lt;script&gt; var oWrap = document.querySelector('.wrap'); var oP = document.qu
JS中DOM元素的操作
热门推荐
不想写代码的一天
05-23 4万+
一、DOM元素的获取 1）document.getElementsByClassName ( “class”) 返回集 htmlcollection ,用法和数组一致 说明: class为DOM元素上class属性的值 2）document.getElementById( “id” ) 功能:返回对拥有指定ID的第一个对象的引用 返回值: DOM对象 说明: id为DOM元素上id属性的值 3)...
JavaScript--删除DOM
天行健 君子以自强不息，地势坤 君子以厚德载物。
07-15 1万+
1. 删除DOM 删除一个DOM节点就比插入要容易得多。插入DOM 要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的 removeChild 把自己删掉： &lt;!-- HTML结构 --&gt; &lt;div id="list"&gt; &lt;p id="java"&gt;Java&lt;/p&gt; &lt;p id="python"&gt;Python&lt;/p&gt; &lt;p id="scheme"&gt;Scheme&lt;/p&gt;
js DOM节点的创建、插入、删除、查找、替换例子
超级书虫
01-20 7678
DOM节点是我们前端人员必须要了解并撑握的一个知识点了，下面我来介绍一些节点的创建、插入、删除、查找、替换操作方法，希望这些方法来帮助到各位同学哦。 在前端开发中，js与html联系最紧密的莫过于对DOM的操作了，本文为大家分享一些DOM节点的基本操作。
Dom样式操作，属性操作以及创建标签
风从北方来的博客
05-31 1356
1.样式操作总结：obj.className=x   设置类名为x        obj.classList    获取obj对象的所有类     obj.classList.add('c1')  在obj对象中添加类c1    obj.classList.remove('c2')  在obj对象中删除类c2obj.style.fontSize='16px'     设置属性fontSize为16...
DOM删除某个元素
weixin_30776545的博客
03-19 679
javascript中removeChild方法可以删除某个节点步骤：1、找到该几点；2、找到该节点的父亲节点，并移除该节点注意：不能够自己移除自己javascript代码： DOM.addEvent(window,'load',function(){DOM.log.write('删除某个节点');varfireFoxLi=documen...
js及jQuery移除html元素所有的class
李欢欢的博客
11-03 3万+
1.比较正式的写法(jQuery) 1$('').removeClass();//removeClass没有参数,就可以移除所有的Class了2.其它写法(jQuery) 1 $('').removeAttr('class'); 2 $('').attr('clas
DOM操作——怎样添加、移除、移动、复制、创建和查找节点
qi1271199790的博客
12-25 2万+
（1）创建新节点       createDocumentFragment()    //创建一个DOM片段       createElement()   //创建一个具体的元素       createTextNode()   //创建一个文本节点 （2）添加、移除、替换、插入       appendChild()       removeChild()
jQuery DOM操作详解：创建、插入、删除与更多
&quot;这篇教程主要关注jQuery中的DOM操作，包括创建、插入、删除和修改DOM元素的方法。&quot; jQuery是一个强大的JavaScript库，它简化了对DOM（文档对象模型）的操作。DOM是网页结构的一种抽象表示，允许通过编程方式访问和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值