插入节点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. C#程序调用cmd执行命令-MySql备份还原

    1.简单实例 //备份还原mysql public static void TestOne() { Process p = new Process(); p.StartInfo.FileName = ...

  2. VMware 虚拟机（linux）增加根目录磁盘空间 转自

    转自 http://wenku.baidu.com/link?url=WZDgESO0oXqYfhPYOWFalZsMglS0HKtLw7t6ICRs_sJ_sfPc85RpxsqKMwqSniis0 ...

  3. Carthage使用(cocoapods的替代)

    1.使用homebrew安装Carthage brew intsall carthage  Ps:没有安装Homebrew的话,进入传送门Homebrew.顺便提一句可以选择简体中文啊.   2.进入 ...

  4. [JavaScript] 判断键盘同时按某些键时执行操作。

    前言:之前知乎上看到过一个介绍国外炫酷网站的,其中一个敏感网站用同时按住"q.a.p.l" 才能观看视频 放手则立即强制停止 (手动斜眼).这个功能的实际用处,我认为是可以在做一些 ...

  5. java下properties属性文件操作

    package cn.stat.p1.file; import java.io.File; import java.io.FileInputStream; import java.io.FileNot ...

  6. 使用 Nginx 来反向代理多个 NoderCMS

    Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.Nginx是由Igor Sysoev为俄罗斯访问量第二的R ...

  7. 菜鸟做HTML5小游戏 - 刮刮乐

    继上篇翻翻乐之后,又来刮刮乐.还是先上效果图: 开始demo的世界: 1.css去绘制界面效果.(源码提供) 2.原理:要实现刮刮卡内容的出现,我用div做了背景层去显示刮出的内容结果[重点].中间C ...

  8. jQuery对下拉框、单选框、多选框的处理

    下拉框: //得到下拉菜单的选中项的文本(注意中间有空格) var cc1 = $(".formc select[@name='country'] option[@selected]&quo ...

  9. Python新手学习基础之函数-概念与定义

    什么是函数? 函数是可以实现一些特定功能的方法或是程序,简单的理解下函数的概念,就是你编写了一些语句,为了方便使用,把这些语句组合在一起,给它起一个名字,即函数名.使用的时候只要调用这个名字,就可以实 ...

  10. CSAPP--存储器及程序的局部性

    作为一名程序员,你需要理解计算机存储系统的层次结构,他对应用程序的性能有着巨大的影响,如果程序所需要的数据存储在cpu的寄存器中,那么指令在执行期间,就可以花费零个周期来进行访问,而在Cache中则需 ...