JavaScript DOM编程艺术—动态创建标记

原创 2015年11月17日 20:42:55
<div id="test">
</div>
当我们需要在名为test的块中添加一段文本的时候,形如:
<div id="test">
<p>this is a test</p>
</div>
对于DOM语言来说,实际上相当于先创建一个p元素节点,再将此p元素节点作为div元素节点的子节点。
然后再创建文本节点,再将文本节点作为p元素节点的子节点。

window.onload = function(){
	var testdiv = document.getElementById("testdiv");
	var para = document.createElement("p");//创建一个p元素节点
	testdiv.appendChild(para);//将此p元素节点作为div元素节点的子节点
	var txt = document.createTextNode("this is a test");//创建文本节点
	para.appendChild(txt);//将文本节点作为p元素节点的子节点
}

在已有元素前插入一个新元素 parentElement.insertBefore(newElement,targetElement)
也可写成 targetElement.parentNode.insertBefore(newElement,targetElement)

在现有元素后插入一个新元素,但是javascript中并不存在insertAfter()函数,所以需要自己创建,形如:

function insertAfter(newElement,targetElement){
	var parent = targetElement.parentNode;
	if(parent.lastChild == targetElement){
		parent.appendChild(newElement);
	}
	else{
		parent.insertBefore(newElement,targetElement.nextSibling);
	}
}





版权声明:本文为博主原创文章,未经博主允许不得转载。

JavaScript_DOM编程艺术第二版学习笔记-第7章

动态创建标记 传统技术:document.write和innerHTML 深入剖析DOM方法:createElement、createTextNode、appendChild和insert...
  • sofia92
  • sofia92
  • 2015年12月16日 09:20
  • 792

总结一下这几天学的《JavaScript DOM编程艺术 第2版》(1)

整本书都是关于如何 DOM
  • u013236064
  • u013236064
  • 2014年08月11日 22:38
  • 1281

javascript DOM编程艺术 读后感与笔记

书评: 一开始接触前端的时候就在各个社区都听说过这本书,不愧为js最广为推荐的入门书,整本书读起来通畅易懂,对一个新手来说几乎不存在什么门槛,让人易于接受,该书通过一个个实例循序渐进,学到新的知识后...
  • m0_37506557
  • m0_37506557
  • 2017年02月25日 16:30
  • 460

【JavaScript DOM编程艺术】- 充实文档的内容

三个DOM练习 -显示“缩略语列表” -显示“文献来源列表” -显示“快捷键列表”...
  • Mluka
  • Mluka
  • 2017年06月13日 17:19
  • 210

javascript dom编程艺术网页案例

包含了五个页面,N多函数,完成工作有幻灯片,点击显示内容功能,图片库,表格优化,表单优化,我自己没有写最后表单的ajax 在博客上只放了 js 函数代码,是供自己温习,想要学习建议阅读书籍。 案例...
  • unaMattin
  • unaMattin
  • 2016年12月04日 23:44
  • 751

《JavaScript DOM编程艺术》学习

JavaScript编程原则和使用习惯  在使用JavaScript之前需思考: 为这个网页增加这种额外的行为是否 确有必要“用户至上” , 这样做会对用户的浏览器产生怎样的影响?浏览器支持Jav...
  • qq_26437925
  • qq_26437925
  • 2016年02月01日 20:10
  • 1096

JavaScript DOM编程艺术-JavaScript图片库

通过点击链接可在一个网页上变换显示的图片。 test.html文件 image show my picture aaaa bbbb ...
  • u013806814
  • u013806814
  • 2015年11月17日 20:10
  • 881

【我的JS第三本】JavaScript_DOM编程艺术第二版读书笔记

经过前一段时间HTML&CSS的学习,感觉视频加读书是一个比较不错的学习方法,两者相辅相成,互相补充,所以也准备看看关于JavaScript的书。       2015年12月14日,之前使用韩顺平老...
  • Creabine
  • Creabine
  • 2015年12月14日 21:12
  • 3342

JavaScript DOM编程艺术第七章Ajax学习笔记

关于Ajax原理 本地file浏览不要用webkit核心浏览器,要用firefox。否则就要搭建服务器后通过http访问。今天学习了Ajax从本地文件获取文本。遇到了些问题,在网络上都找到了解决...
  • where_slr
  • where_slr
  • 2017年07月08日 14:04
  • 252

Javascript_DOM编程艺术(上)

javascript_DOM
  • qq_26327971
  • qq_26327971
  • 2017年03月26日 20:48
  • 444
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript DOM编程艺术—动态创建标记
举报原因:
原因补充:

(最多只允许输入30个字)