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编程艺术】- 动态创建标记

用DOM动态的创建HTML文档,以及再次修改图片库。
  • Mluka
  • Mluka
  • 2017年06月06日 17:21
  • 130

JavaScript DOM编程艺术 学习笔记(七)动态创建标记

之前见到的dom方法只能用来查找元素。 绝大多数的做法是网页的结构由标记负责创建,javaScript函数只用来改变某些细节而不改变其底层结构。本章将通过创建新元素和修改现有元素来改变网页结构。...

JS编程艺术笔记(3)-动态创建标记

//知识点概览: //parentNode属性、lastChild属性、appendChild方法、insertBefore方法、nextSiling属性 // function addLoadEve...

JavaScript DOM编程艺术学习笔记(二):动态标记

JavaScript DOM编程艺术学习笔记(二):动态标记动

JavaScript DOM 编程艺术学习笔记(一):静态标记

JavaScriptDOM编程艺术学习笔记(一):静态标记对象

Js Dom节点树理解及动态创建标记

test
  • mmrsdym
  • mmrsdym
  • 2014年03月14日 09:07
  • 834

JavaScript DOM编程基础精华02(window对象的属性,事件中的this,动态创建DOM,innerText和innerHTML)

window对象的属性1 window.location对象: window.location.href=‘’;//重新导航到新页面,可以取值,也可以赋值。 window.location.reloa...
  • XHQT520
  • XHQT520
  • 2016年02月09日 16:17
  • 497

使用JavaScript和DOM动态创建表格

  • 2007年10月19日 14:52
  • 136KB
  • 下载

JavaScript 动态创建标记与Ajax

摘要: 记录JavaScript常用创建标记、组合标记方法和Ajax概念以及传统使用方式。代码展示知识点。...

JavaScript DOM编程艺术—显示“缩略语列表”

将文档中的标签中的title属性集中起来显示在一个页面. test.html Explaining the Document Object Model what is the ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript DOM编程艺术—动态创建标记
举报原因:
原因补充:

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