Javascript DOM 编程艺术读书笔记16/04/02

Posted 2020-07-03 iEdson

 最后更新 2016-04-02 16:14:06

---

前言：

前面都是讲用jsp语法改变html现有的内容，本节讲一下如何动态得给html插入内容

如果深入理解dom节点树，我们了解html内容其实是以节点树的方式存在，改变内容，就是给节点树添加新的节点

当然，我们用jsp给web页面添加内容，并不会改变原来的html文档

---

创建节点的两个重要的函数

createElemnt("x")  创建元素节点,返回新创建的节点的引用

createTextNode("text") 创建文本节点

比如创建一个p节点,我们用document作为父节点

var para=document.createElement("p"); //para为新创建的"p"的引用

这个p节点内部没有任何内容，同时这个元素游离在document中，我们无法web页面观测出，但是这个元素又确实存在

当然我们可以setAttribute给这个新元素节点添加属性节点

---

 

挂载新创建的节点的重要的函数内置(不能将节点挂载到文本节点)

appenChild(newnode) 通式为parent.appendChild("newnode") 

insertBefore(newnode,targetnode) 插入在targetnode之前

通过内置函数创建一个新的插入函数insertAfter

function insertAfter(newnode,targetnode){

　　var parent = taretnode.parentNode;
　　if(targetnode.node==parent.lastChild){

　　　　parent.appendChild(newnode);

　　}else{

　　　　parent.insertBefore(newnode,targetnode.nextSiblingNode);
　　}

}