`
tianjun309
  • 浏览: 367108 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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

JavaScriptHTML 
阅读更多 
<!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" onclick="addDIV(document.getElementById('text').value);"/>				
			</span>
			<span>
				<input type="submit" value="delete" id="submit" onclick="deleteDIV(document.getElementById('text').value);"/>				
			</span>
		   <span>
				<input type="submit" value="delete" id="submit2" onclick="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]);
	};
}
分享到：
| DOM 加载顺序
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    htmlDOM.rar_DOM_HTML DOM_HTML dom_HTMLD_w3c htmld

    通过DOM，你可以使用JavaScript等脚本语言来操作这些节点。例如，你可以： - 查找特定元素：使用`getElementById()`, `getElementsByTagname()`, `querySelector()`等方法。 - 创建新的元素：使用`createElement()`...

    对层的删除和添加，并且可以删除div层的时候排序

    删除`div`层通常涉及DOM操作。在JavaScript中，可以使用`removeChild()`或`parentNode.removeChild()`方法来删除指定的`div`元素。例如，假设我们有一个id为"to-delete"的`div`，删除它的代码如下： ```javascript ...

    JavaScript利用HTML DOM进行文档操作的方法_.docx

    ### JavaScript 利用 HTML DOM 进行文档操作的方法 #### DOM 概述 文档对象模型 (DOM) 是 W3C 制定的一项标准，用于访问和处理 XML 和 XHTML 等结构化的文档。DOM 提供了一个平台和语言中立的接口，使得程序和脚本...

    JS DOM操作备忘

    **JS DOM操作备忘** 在JavaScript中，DOM（Document Object Model）是HTML和XML文档的结构化表示，它提供了一种标准的方式来访问和修改页面内容。这篇备忘将深入探讨如何利用JavaScript进行DOM操作，包括选择元素、...

    javascript 操作DOM

    JavaScript操作DOM（Document Object Model）是网页开发中的核心技能之一，它允许我们动态地修改、添加和删除HTML或XML文档的结构与内容。DOM是一种树形结构，将页面元素视为对象，提供了丰富的接口来实现对这些对象...

    JavaScript-DOM.rar_javascript

    DOM是独立于语言的标准，但JavaScript是最常用来操作DOM的语言，因此JavaScript DOM在前端开发中扮演着核心角色。 一、JavaScript DOM的本质 DOM本质是一个树形结构，它将网页内容视为节点层次，其中每个元素、属性...

    javascript操作DIV总结（弹出窗口篇）

    在JavaScript中，对DIV的操作主要包括获取元素、修改属性、添加和删除事件监听器，以及动态创建和销毁元素。对于弹出窗口，模态对话框和非模态弹出框的实现主要依赖于CSS和JavaScript的结合使用，浮动窗口则涉及到...

    经典之作javascript dom编程艺术源码

    JavaScript DOM编程艺术是一本深入解析DOM操作的经典书籍，它的源码提供了丰富的实例，帮助开发者深入理解如何使用原生JavaScript高效地操纵网页元素。DOM（Document Object Model）是HTML和XML文档的标准表示，它将...

    DOM基础及DOM操作HTML

    在学习这个课程时，你可能需要了解如何在NetBeans中编写和调试JavaScript代码，以及如何结合DOM操作实现AJAX请求。 总结来说，DOM是理解网页动态交互的核心技术，它提供了一种标准化的方式来操作HTML和XML文档。...

    javascript dom 基本操作小结

    以下是 JavaScript DOM 基本操作小结，总结了 DOM 元素的创建、插入、替换和删除等基本操作。 DOM 元素的创建 在 JavaScript 中，使用 `document.createElement()` 方法可以创建一个新的 DOM 元素。例如，创建一个...

    JavaScript 实现HTML DOM增删改查操作的常见方法详解

    JavaScript实现HTML DOM增删改查操作的常见方法详解主要介绍了如何使用JavaScript对HTML文档对象模型（DOM）进行元素的查找、增加、删除和修改操作。这些操作是Web开发中非常基础且常用的功能，能够对网页元素进行...

    JavaScriptDOM编程艺术.pdf

    现代Web开发框架（如React、Angular和Vue.js）都内置了对DOM操作的支持，通过虚拟DOM等技术提高了DOM操作的效率。 综上所述，DOM是现代Web开发中不可或缺的一部分。理解和掌握DOM的基本原理及操作方法对于成为一名...

    交换两个div的位置

    - JavaScript 可以通过 DOM 来读取和修改 HTML 元素的内容、属性和样式，以及添加、删除和移动元素。 2. **选择元素**： - 使用 `document.getElementById()` 方法来根据元素的 ID 获取指定元素。例如：`var t1 =...

    Javascript系列-DOM操作(理论)

    操作DOM元素主要包括创建、添加、删除和修改： - `createElement()`：创建新的元素，如`document.createElement("div")`。 - `appendChild()`：将新元素添加到已有的元素末尾，如`parent.appendChild(child)`。 - `...

    02-DOM_DOM_

    **DOM（文档对象模型）详解** DOM，全称为Document Object Model，是一种标准的、平台无关的接口，允许程序和脚本动态更新、添加、删除以及改变任何部分的HTML和XML文档。DOM是W3C（World Wide Web Consortium）...

    javaScript 生成DOM 对象（html标签）.rar

    `document.createElement()`允许我们创建指定标签名的新元素，例如： ```javascript var newElement = document.createElement('div'); ``` 这将创建一个新的`&lt;div&gt;`元素。然后，我们可以使用`appendChild()`或`...

    DOM访问/创建/删除/修改文档节点及属性方法

    DOM 访问、创建、删除、修改文档节点及属性方法 DOM（Document Object Model）是 HTML 和 XML 文档的编程接口，允许开发者使用脚本语言（如 JavaScript）来访问和操作文档的结构和内容。在这里，我们将详细介绍 DOM...

    nanoJS用于DOM操作的最小独立JS库

    2. **元素操作**：纳米JS支持创建、插入、删除和修改DOM元素。例如，可以使用`nanoJS.create('div')`创建一个新的`&lt;div&gt;`元素，使用`nanoJS.append(parent, child)`将子元素插入到父元素的末尾，或者使用`nanoJS....

    DOM_elementos_de_selecion_01_03_2021

    DOM的核心概念是将HTML或XML文档分解为独立的对象，这些对象可以被单独地创建、修改或删除。每个HTML标签（如`&lt;div&gt;`, `&lt;p&gt;`, `&lt;img&gt;`等）在DOM中都对应一个节点。这些节点分为不同类型的节点，包括元素节点、文本...

    JavaScript DOM节点操作实例小结(新建,删除HTML元素)

    总的来说，JavaScript DOM节点操作是Web开发中不可或缺的一部分，无论是新建元素来增加页面内容，还是删除元素来实现动态更新，都体现了JavaScript在网页动态化方面的强大能力。在实际项目中，开发者还需要注意性能...

Magicbox
Global site tag (gtag.js) - Google Analytics