插入节点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. cocos2dx 动画 二（iOS）

    7.Bezier曲线 需要ccBezierConfig结构体,设置2个控制点和一个结束点 ccBezierConfig bc; bc.controlPoint_1 = Vec2(,); bc.cont ...

  2. C#进程与线程

    public Form1() { InitializeComponent(); } private void button1_Click(object sender, EventArgs e) { / ...

  3. OpenCV——改变图像大小

    , , int interpolation=INTER_LINEAR ) dsize与fx和fy必须不能同时为零,也就是说要么dsize不为零而fx与fy同时可以为0,要么dsize为0而fx与fy不 ...

  4. POJ 3045 Cow Acrobats (贪心)

    POJ 3045 Cow Acrobats 这是个贪心的题目,和网上的很多题解略有不同,我的贪心是从最下层开始,每次找到能使该层的牛的风险最小的方案, 记录风险值,上移一层,继续贪心. 最后从遍历每一 ...

  5. pyqt5消息框QMessageBox

    QMessageBox消息框有以下几种类型: QMessageBox.information 信息框   QMessageBox.question 问答框   QMessageBox.warning ...

  6. 关于mobiscroll插件的使用

    在网上找了很多资料,各大猿友对这个插件都做了很详细的介绍,我也是看了很多资料才发现原来这个插件有一些需要注意的地方,在这总结了一下: //时间 var currYear = (new Date()). ...

  7. drop,delete,truncate

    drop,truncate是ddl,数据库定义语言,不执行事务 delete是dml,数据库操作语言,有事务 drop:删除内容和定义,释放空间 delete:删除内容,不删除定义,不释放空间 tru ...

  8. Caffe--solver.prototxt配置文件 参数设置及含义

    ####参数设置################### 1. ####训练样本### 总共:121368个batch_szie:256将所有样本处理完一次(称为一代,即epoch)需要:121368/ ...

  9. 怎样制作百度recovery【转】

    由于recovery的硬件相关性比较强,使得recovery的通用性不强,项目组为了降低整个开发的难度,coron项目里面默认是编译生成百度recovery的. 不过还是有很多开发者问私下我,怎样制作 ...

  10. DatePickerDialog 控制只选择年月或年或月

    etXyLevelDate.setOnTouchListener(selectDateTouchListener()); /** * @desc 选择日期操作 * @param @return * @ ...