Javascript DOM 编程艺术读书笔记16/04/02
最后更新 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); } }
在一个谎言的国度,沉默就是英雄