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-添加元素、节点的更多相关文章

  1. JavaScript HTML DOM 元素(节点)

    JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...

  2. DOM树节点和事件

    一.前言:DOM树节点是JS的基础语句.通过节点,能够取到HTML代码中的任意标签,从而对其进行修改和添加各种视觉效果. 二.DOM树节点    DOM节点分为三大类: 元素节点,属性节点,文本节点  ...

  3. JavaScript之DOM创建节点

    上几篇文章中我们罗列了一些获取HTML页面DOM对象的方法,当我们获取到了这些对象之后,下一步将对这些对象进行更改,在适当的时候进行对象各属性的修改就形成了我们平时看到的动态效果.具体js中可以修改D ...

  4. dom操作节点之常用方法

    DOM:获取节点:{1. document.getElementById (元素id):通过元素id找到节点2. document.getElementsByClassName (元素类名classN ...

  5. 围绕DOM元素节点的增删改查

    HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 document 每个 HTML 元素是元素节点 element HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是 ...

  6. 记录Js动态加载页面.append、html、appendChild、repend添加元素节点不生效以及解决办法

    今天再优化blog页面的时候添加了个关注按钮和图片,但是页面上这个按钮和图片时有时无,本来是搞后端的,被这个前端的小问题搞得抓耳挠腮的! 网上各种查询解决方案,把我解决问题的艰辛历程分享出来,希望大家 ...

  7. jQuery 中使用 DOM 操作节点，对页面中的表格实现增、删、查、改操作

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...

  8. Dom 动态添加元素节点总结

    jQuery创建元素节点的方法: 创建元素节点: $("<div></div>"): 创建文本节点: $("<div>直接将文本的内容 ...

  9. 简述HTML DOM及其节点分类

    在JavaScript中,document这个对象大家一定很熟悉,哪怕是刚刚开始学习的新人,也会很快接触到这个对象.而document对象不仅仅是一个普通的JavaScript内置对象,它还是一个巨大 ...

  10. DOM 元素节点几何量与滚动几何量

    当在 Web 浏览器中查看 HTML 文档时,DOM 节点被解析,并被渲染成盒模型(如下图),有时我们需要知道一些信息,比如盒模型的大小,盒模型在浏览器中的位置等等,本文我们就来详细了解下元素节点的几 ...

随机推荐

  1. 安装webpack常见错误之一

    我安装webpack时,出现如下错误: C:\Users\admin> npm install webpack -gnpm WARN checkPermissions Missing write ...

  2. MYsql 之多表查询.

    http://www.cnblogs.com/wangfengming/articles/8067220.html

  3. 前端入门html（常用标签及标签分类）

    day47 参考:https://www.cnblogs.com/liwenzhou/p/7988087.html 任何标签都有有三个属性:ID,class.style <!DOCTYPE ht ...

  4. python爬虫3——获取审查元素(板野友美吧图片下载)

    测试环境:python2.7 + beautifulsoup4.4.1 + selenium2.48.0 测试网址:http://tieba.baidu.com/p/2827883128 目的是下载该 ...

  5. Flask从入门到精通之自定义错误界面

    如果你在浏览器的地址栏中输入了不可用的路由,那么会显示一个状态码为404 的错误页面.现在这个错误页面太简陋.平庸,而且样式和使用了Bootstrap 的页面不一致. 像常规路由一样,Flask 允许 ...

  6. iOS 获取设备的各种信息的方法

    一.目录结构: 获取屏幕宽度与高度 获取设备版本号 获取iPhone名称 获取app版本号 获取电池电量 获取当前系统名称 获取当前系统版本号 获取通用的唯一识别码UUID 获取当前设备IP 获取总内 ...

  7. 散列表碰撞处理、开链法、HashTable散列

    散列表碰撞处理.开链法.HashTable散列 /** * 散列表碰撞处理.开链法.HashTable散列. * 将数组里的元素位置,也设置为数组,当两个数据的散列在同一个位置时, * 就可以放在这个 ...

  8. "|"，“.”，"include"在jade中的用法（原样输出）

    我们知道, body --><body> abc --><abc></abc> --></body> 如果我们想直接输入内容怎么办呢: ...

  9. TapTap推广统计逻辑

    当我们在Taptap上访问某款游戏时,比如https://www.taptap.com/app/34762,taptap会记录下这次访问,它是怎么做的呢. 首先,用记事本打开这个网址,在head部分看 ...

  10. (转)使用 DB2 HADR 选择用于灾难恢复的 SUPERASYNC 模式

    使用 DB2 HADR 选择用于灾难恢复的 SUPERASYNC 模式 Vishnu G 和 Hemant Singh2013 年 6 月 25 日发布 WeiboGoogle+用电子邮件发送本页面 ...