DOM-添加元素、节点
createElement()方法能够根据参数指定的标签名称创建一个新元素，并返回新建元素的引用，用法如下
var element=document.createElement("tagName");
其中element表示新建元素的引用，createElement()是document对象的一个方法，该方法只有一个参数，用来指定创建元素的标签名称。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> </head>
<body> <p id="attr" class="ff">世界之大，无奇不有</p>
<ul> </ul>
<script>
var element=document.createElement("p");
var b=element.nodeName;
var v=element.nodeType;
document.body.appendChild(element); //添加到body 子节点下
element.innerHTML="我也想去看看"; //给元素加上内容 alert(b+v); </script>
</body>
</html>
使用createElement()方法创建的新元素不会被自动添加到文档中，因为新元素还没有nodeParent属性，仅在javascript上下文中有效，如果要把这个元素添加到文档中，还需要使用appendChild()、insertBefore()或replaceChild()方法实现。
复制节点
cloneNode()方法可以创建一个节点的副本，其用法如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> </head>
<body> <p id="attr" class="ff">世界之大，无奇不有</p>
<ul> </ul>
<script>
var p=document.createElement("p"); //创建p元素
var h1=document.createElement("h1"); //创建h1元素
var txt=document.createTextNode("你好，世界"); //创建文本节点
var hello=txt.cloneNode(false); //复制创建的文本节点
p.appendChild(hello); //把复制的文本节点添加到段落中
h1.appendChild(p); //把段落节点增加到h1标题中
document.body.appendChild(h1); //把标题节点增加到body中
</script>
</body>
</html>
由于赋值节点会包含节点的所有特性，如果原节点中包含ID属性，就会出现id属性重叠情况，一般情况下，在同一个文档中，不同呀U尿素的id属性值应该不同，为了避免
潜在冲突，应修改其中某个节点id属性值。
插入节点
1.appendChild()方法
appendChild()方法可向当前节点的子节点列表的末尾添加新的子节点，用法如下
appendChild(newChild)；
参数newchild表示新添加的节点对象，并返回新节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> </head>
<body> <p id="attr" class="ff">世界之大，无奇不有</p>
<ul> </ul>
<script>
var p=document.createElement("p"); //创建段落元素
var txt=document.createTextNode("你好世界，世界你好"); //创建文本节点
p.appendChild(txt); //把文本节点添加到段落节点中
document.body.appendChild(p); //把段落节点添加到body节点的末尾处
</script>
</body>
</html>
2.insertBefore()方法
可在已有的子节点前插入一个新的子节点，用法如下
insertBefore(newchild，refchild)；
其中参数newchiild表示插入新的节点，refchild表示在此节点前插入新的子节点，返回新的子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> </head>
<body> <p id="attr" class="ff">世界之大，无奇不有</p>
<ul> </ul>
<script>
var p0=document.getElementById("attr");
var p=document.createElement("p"); //创建段落元素
var txt=document.createTextNode("你好世界，世界你好"); //创建文本节点
p.appendChild(txt); //把文本节点添加到段落节点中
document.body.insertBefore(p,p0); //添加段落p在p0前面
</script>
</body>
</html>
删除节点
removeChild()方法可以从子节点列表中删除某个节点，用法如下
nodeObject.removeChild(node)；
其中参数node为要删除的节点，如果删除成功，则返回被删除的节点，如果失败，则返回null，方使用removeChild()方法删除节点时，该节点所包含的所有子节点将同时被删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> </head>
<body> <p id="attr" class="ff">世界之大，无奇不有</p>
<ul> </ul>
<script>
var p=document.getElementById("attr"); //获取段落节点
document.body.removeChild(p); //从body中删除段落节点和所有的子节点
</script>
</body>
</html>
替换节点
replaceChild()方法可以将某个子节点替换为另一个。用法如下：
DOM-添加元素、节点的更多相关文章
- JavaScript HTML DOM 元素(节点)
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...
- DOM树节点和事件
一.前言:DOM树节点是JS的基础语句.通过节点,能够取到HTML代码中的任意标签,从而对其进行修改和添加各种视觉效果. 二.DOM树节点 DOM节点分为三大类: 元素节点,属性节点,文本节点 ...
- JavaScript之DOM创建节点
上几篇文章中我们罗列了一些获取HTML页面DOM对象的方法,当我们获取到了这些对象之后,下一步将对这些对象进行更改,在适当的时候进行对象各属性的修改就形成了我们平时看到的动态效果.具体js中可以修改D ...
- dom操作节点之常用方法
DOM:获取节点:{1. document.getElementById (元素id):通过元素id找到节点2. document.getElementsByClassName (元素类名classN ...
- 围绕DOM元素节点的增删改查
HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 document 每个 HTML 元素是元素节点 element HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是 ...
- 记录Js动态加载页面.append、html、appendChild、repend添加元素节点不生效以及解决办法
今天再优化blog页面的时候添加了个关注按钮和图片,但是页面上这个按钮和图片时有时无,本来是搞后端的,被这个前端的小问题搞得抓耳挠腮的! 网上各种查询解决方案,把我解决问题的艰辛历程分享出来,希望大家 ...
- jQuery 中使用 DOM 操作节点，对页面中的表格实现增、删、查、改操作
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...
- Dom 动态添加元素节点总结
jQuery创建元素节点的方法: 创建元素节点: $("<div></div>"): 创建文本节点: $("<div>直接将文本的内容 ...
- 简述HTML DOM及其节点分类
在JavaScript中,document这个对象大家一定很熟悉,哪怕是刚刚开始学习的新人,也会很快接触到这个对象.而document对象不仅仅是一个普通的JavaScript内置对象,它还是一个巨大 ...
- DOM 元素节点几何量与滚动几何量
当在 Web 浏览器中查看 HTML 文档时,DOM 节点被解析,并被渲染成盒模型(如下图),有时我们需要知道一些信息,比如盒模型的大小,盒模型在浏览器中的位置等等,本文我们就来详细了解下元素节点的几 ...
随机推荐
- .NET Core 和 .NET .Framework 速度比较
废话不多说! 一下是 .NET core 和 .NET framework 速度对比. 两者使用最慢的冒泡排序算法: 排序10万条数据 次数 .NET CORE(耗时) .NET framework ...
- Sql语句在SqlServer中创建数据库、表格并添加约束
通过Sql语句来创建数据库与架构 创建数据库 数据库的创建首先是要引用主数据库的,需要在master数据库的环境下进行创建.大致的语法如下: -- 使用master数据库 use master -- ...
- MySQL事务一致性理解
一致性是指数据处于一种语义上的有意义且正确的状态.一致性是对数据可见性的约束,保证在一个事务中的多次操作的数据中间状态对其他事务不可见的.因为这些中间状态,是一个过渡状态,与事务的开始状态和事务的结束 ...
- 解决oninput在输入中文时，会获取拼音的问题
(1)起因:在今天做项目测试的时候发现的问题,在用微软自带的输入法的时候,输入中文,文本框会获得拼音 如图所示: (2)解决办法:经过一段时间的百度查找,最后通过这篇文章找到了解决的方法,这里给出网址 ...
- sqlserver学习
清空数据表: delete from TableName 清除表中的所有的数据,保留表的结构 truncate table TableName 清除表中所有行,保留表结构 (重置ID) 删除表 Dr ...
- 错误：Parameter '0' not found.Available parameters are [arg1, arg0, param1, param2]的解决方法
调用的方法: List<Card> temp = cardService.queryRepeat(Type,shop); xml: <select id="queryRep ...
- AVL树的实现——c++
一.概念 AVL树是根据它的发明者G.M. Adelson-Velsky和E.M. Landis命名的.它是最先发明的自平衡二叉查找树,也被称为高度平衡树.相比于"二叉查找树",它 ...
- Heap-451. Sort Characters By Frequency
Given a string, sort it in decreasing order based on the frequency of characters. Example 1: Input: ...
- 程序猿的日常——SpringMVC系统架构与流程回顾
web开发经历了很漫长的时间,在国内也快有十几年的时间了.从最开始的进程级到现在的MVC经历了很多的改进和优化,本篇就主要复习了解下Spring MVC相关的知识. 发展历程 第一阶段 CGI进程响应 ...
- Access 2010 应用基础 单元三：SQL查询
导语:Access查询中拉差距的部分 简单查询 [是基于单个表的查询] 无条件从数据表中选择部分字段 Select 字段列表 from 数据表 无条件从数据表中选择全部字段 Select 字段列表 f ...