插入节点appendChild()
在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法:

appendChild(newnode)

//参数:

//newnode：指定追加的节点。

为ul添加一个li，设置li内容为PHP，代码如下:

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 </head>

 <body>

     <ul id="test">

         <li>JavaScript</li>

         <li>HTML</li>

     </ul>

     <script type="text/javascript">

         var otest = document.getElementById("test");

         var newnode = document.createElement("li");

         newnode.innerHTML = "PHP";

         otest.appendChild(newnode);

     </script>

 </body>

 </html>

运行结果:

JavaScript

HTML

PHP

插入节点insertBefore()
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法:

insertBefore(newnode,node);

//参数:

//newnode: 要插入的新节点。

//node: 指定此节点前插入节点。

下面代码在指定节点前插入节点:

运行结果:

This is a new p

JavaScript

HTML

otest.insertBefore(newnode,node); 也可以改为: otest.insertBefore(newnode,otest.childNodes[0]);

删除节点removeChild()
removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
语法:

nodeObject.removeChild(node)

//参数:

//node ：必需，指定需要删除的节点。

删除子点:


运行结果:

HTML

删除节点的内容: javascript

把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作。
如果要完全删除对象，给 x 赋 null 值，代码如下:

例：定义clearText()函数，完成节点内容的删除

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 </head>

 <body>

 <div id="content">

     <h1>html</h1>

     <h1>php</h1>

     <h1>javascript</h1>

     <h1>jquery</h1>

     <h1>java</h1>

 </div>

 <script type="text/javascript">

     function clearText() {

         var content=document.getElementById("content");

         for(var i=content.childNodes.length-1;i>=0;i--){

             var childNode = content.childNodes[i];

             content.removeChild(childNode);

         }

     }

 </script>

 <button onclick="clearText()">清除节点内容</button>

 </body>

 </html>

替换元素节点replaceChild()
语法：

node.replaceChild (newnode,oldnew )

//参数：

//newnode : 必需，用于替换 oldnew 的对象。

//oldnew : 必需，被 newnode 替换的对象。

将 b 标签替换成 i 标签:

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 </head>

 <body>

     <div><b id="oldnode">JavaScript</b>是一个很常用的技术，为网页添加动态效果。</div>

     <a href="javascript:replaceMessage()"> 将加粗改为斜体</a>

     <script type="text/javascript">

         function replaceMessage(){

             var oldnode = document.getElementById("oldnode");

             var oldHTML = oldnode.innerHTML;

             var newnode = document.createElement("i");

             oldnode.parentNode.replaceChild(newnode,oldnode);

             newnode.innerHTML = oldHTML;

         }

     </script>

 </body>

 </html>

1. 当 oldnode 被替换时，所有与之相关的属性内容都将被移除。 

2. newnode 必须先被建立。 

创建元素节点createElement
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
语法：

document.createElement(tagName)

//参数:

//tagName：字符串值，这个字符串用来指明创建元素的类型。

要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。

创建一个按钮，代码如下：

 var body = document.body;

 var input = document.createElement("input");

 input.type = "button";

 input.value = "创建一个按钮";

 body.appendChild(input);

使用setAttribute来设置属性，代码如下：

 <script type="text/javascript">

     var body= document.body;

     var btn = document.createElement("input");

     btn.setAttribute("type", "text");

     btn.setAttribute("name", "q");

     btn.setAttribute("value", "使用setAttribute");

     btn.setAttribute("onclick", "javascript:alert('This is a text!');");

     body.appendChild(btn);

 </script>

效果：在HTML文档中，创建一个文本框，使用setAttribute设置属性值。 当点击这个文本框时，会弹出对话框“This is a text!”。

例：添加链接地址、文本、文字颜色属性。调用createa函数

 <script type="text/javascript">

     var main = document.body;

     //创建链接

     function createa(url,text){

         var a = document.createElement("a");

         a.href = url;

         a.innerHTML = text;

         a.style.color = "red";

         main.appendChild(a);

     }

     // 调用函数创建链接

     createa("http://www.immooc.com/","慕课网");

 </script>

创建文本节点createTextNode
createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
语法：

document.createTextNode(data)

//参数：

//data : 字符串值，可规定此节点的文本。

创建一个P标签，设置className属性，使用createTextNode创建文本节点"I love JavaScript!":

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <style type="text/css">

     .message{

         width:200px;

         height:100px;

     }

 </style>

 </head>

 <body>

     <script type="text/javascript">

         var element = document.createElement("p");

         element.className = "message";

         var textnode = document.createTextNode("I love JavaScript!");

         element.appendChild(textnode);

         document.body.appendChild(element);

     </script>

 </body>

 </html>

Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理的更多相关文章

  1. 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素

    1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...

  2. Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理

    节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType : ...

  3. Javascript进阶篇——(DOM—认识DOM、ByName、ByTagName)—笔记整理

    认识DOM文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 将HTML代码分解 ...

  4. Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理

    浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...

  5. Javascript进阶篇——(DOM—getAttribute()、setAttribute()方法)—笔记整理

    getAttribute()方法通过元素节点的属性名称获取属性的值.语法: elementNode.getAttribute(name) 1. elementNode:使用getElementById ...

  6. 6、JavaScript进阶篇③——浏览器对象、Dom对象

    一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...

  7. JavaScript进阶内容——DOM详解

    JavaScript进阶内容--DOM详解 当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了 首先我们思考一下:JavaScript是用来做什么的? JavaScript ...

  8. 4、JavaScript进阶篇①——基础语法

    一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...

  9. 【叔小生】JavaScript进阶篇

    如何插入JS JS基础语法 语法.函数.方法 提取字符串substring() substring() 方法用于提取字符串中介于两个指定下标之间的字符. <!DOCTYPE HTML> & ...

随机推荐

  1. Beacon浅析

    作者:hongbosun 一.Beacon简介 Beacon是基于BLE技术实现的物理设备.BLE(全称Bluetooth Low Energy)是蓝牙4.0技术规范的一部分.它起源于Nokia的Wi ...

  2. （转）【已解决】关于SQL2008 “不允许保存更改。您所做的更改要求删除并重新创建以下表。您对无法重新创建的标进行了更改或者启用了‘阻止保存要求重新创建表的更改’” 解决方案

    近日在使用sql2008的过程中,要对已经创建完成的表结构进行修改,却一直提示弹出如下提示: “ 不允许保存更改.您所做的更改要求删除并重新创建以下表.您对无法重新创建的标进行了更改或者启用了“阻止保 ...

  3. 关于看似简单的eclipse中tomcat小猫图标消失的问题解决

    首先,这个问题出现在我新安装的虚拟机中,自己准备重新搭一套开发环境用于学习. 所以,出于好奇,自己从官网上把eclipse的最新版neo下下来尝尝鲜,刚安装好后发现与之前用的旧版基本相同,于是把相应的 ...

  4. Xcode中的iOS模拟器(iOS Simulator)的介绍和使用心得

    http://www.crifan.com/intro_ios_simulator_in_xcode_and_usage_summary/

  5. OC基础 NSData

    OC基础 NSData 1.NSString转NSData //NSString转NSData NSString *string = @"abcd12345"; NSData *d ...

  6. Sql Server添加用户

    1.sa用户登陆之后,在安全性中新建登录名 2.添加登录名,下面的默认数据库选择该用户可访问的默认数据库 3.服务器角色中选择public 4.用户映射中选择该用户可访问的数据库,数据库角色一般选择p ...

  7. asp.net 的那点事（1、当用户在浏览器地址栏输入了网址后，发生了什么？）

    从今天开始我将抽出空闲时间复习asp.net相关知识.此篇博文只是为了记录学习当中的知识点和感觉到比较重要的知识点. 本人才疏学浅,如有遗漏或者错误希望广大博友尽情拍砖.我会在后续中进行更正. 这个问 ...

  8. 百度PHP实习一面面试题－算法－二维有序矩阵的查找

    题目描述 有一个二维矩阵,每一行的元素,从左到右保持严格递增,每一列的元素,从上到下保持严格递增.查找给定元素elem,返回NULL或元素位置. 1 3 7 15 16 2 5 8 17 19 3 6 ...

  9. HTML&CSS基础学习笔记1-简单网页中有哪些标签？

    一个简单网页中有哪些HTML标签? 平时我们看到的网页,都是由HTML的标签来组成的.HTML标签非常多,我们先来认识一部分. 1. <html></html>称为根标签,所有 ...

  10. 使用NSTimer实现倒计时-备

    今天在CocoaChina上面看到有人在问倒计时怎么做,记得以前在看Iphone31天的时候做过一个,今天翻出来运行不了了,原因是我的IphoneSDK升级到3.1了,以前使用的是2.2.1,在2.2 ...