码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2016-04-02 17:22:12      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:

 最后更新 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);
  }

}

 

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

标签:

原文地址:http://www.cnblogs.com/EdsonLin/p/5347716.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!