插入节点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. 腾讯云(centos)上安装apache

    安装 yun install httpd 随系统自启动 chkconfig httpd on 修改/etc/httpd/conf/httpd.conf文件 #修改WWW目录为自己的目录 Dcoumen ...

  2. (转)强大的JQuery表单验证插件 FormValidator使用介绍

    jQuery formValidator表单验证插件是客户端表单验证插件.在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者(J ...

  3. tomcat下出现The file is absent or does not have execute&

    启动tomcat出现The file is absent or does not have execute permission... Cannot find bin/catalina.sh The ...

  4. div滚动条，可以自由的给滚动条定义背景，上下按钮，当然不仅仅是颜色，连图片当背景也可以。

    可以自由的给滚动条定义背景,上下按钮,当然不仅仅是颜色,连图片当背景也可以.支持鼠标滚轮,点击滚动条滚轴定位,上下按钮久按加速,兼容firefox,谷歌 下载地址

  5. uva 10994 - Simple Addition

    //组合数学 //计算sum{i从右往左数的第一个非0数字,p<=i<=q}. #include <cstdio> typedef long long ll; ll sum(l ...

  6. 抽奖转盘（jqueryrotate.js）

    jqueryrotate.js抽奖转盘,使用方便,兼容各浏览器,效果如下图 <!DOCTYPE> <head> <meta http-equiv="Conten ...

  7. Ubuntu-Java-Scala-Spark-IEDA-configure

    最近要接触数据分析,需要快速入门,就想在Ubuntu下配置IDEA和Spark编程环境. 1.下载jdk #java /etc/profile .zshrc, 或者直接在终端输入export JAVA ...

  8. jQuery.fn

    DIY一个jQuery 写了一个非常简单的 jQuery.fn.init 方法: jQuery.fn.init = function (selector, context, root) { if (! ...

  9. c++ 字符类型总结区别wchar_t,char,WCHAR（转）

    1.区别wchar_t,char,WCHAR ANSI:即 char,可用字符串处理函数:strcat( ),strcpy( ), strlen( )等以str打头的函数.   UNICODE:wch ...

  10. ural 1586. Threeprime Numbers

    这道题看着别人的代码写的. #include <cstdio> #include <cstring> #define m 1000000009 using namespace ...