web前端之JavaScript DOM编程艺术之动态创建标记
一些传统方法：
document.write:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Test</title>
</head>
<body>
<script type="text/javascript">
document.write("<p>This is inserted</p>");
</script>
</body>
</html>JavaScript与HTML混在一起是一种很不好的做法。这样既不容易阅读和编辑，也无法享受到把行为与结构分离开来的好处。
innerHTML属性：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Test</title>
<script type="text/javascript">
window.onload=function(){
var testdiv=document.getElementById("testdiv");
testdiv.innerHTML="<p>I inserted <em>this</em> content.</p>"
}
</script>
</head>
<body>
<div id="testdiv"></div>
</body>
</html>innerHTML无法区分这个替换还是插入。一旦使用innerHTML，id为testdiv的内容将全部被替换。
innerHTML属性不会返回任何对刚插入的内容的引用。如果想对插入的内容进行处理，则需要使用DOM提供的那些精确的方法和属性。
DOM方法：
createElement方法:
（1）创建一个新的元素。
（2）把这个新的元素插入到节点树。
window.onload=function(){
var para=document.createElement("p");
var info="nodeName: ";
info += para.nodeName;
info += " nodeType:";
info += para.nodeType;
alert(info);
}这就意味着新的元素已经被创建
appendChild方法：
var para=document.createElement("p");
var testdiv=document.getElementById("testdiv");
testdiv.appendChild(para);将新创建的para添加到id为testdiv中去。
createTextNode方法：
就是在新添加的para中添加其对应的文本。
最后结果的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Test</title>
<script type="text/javascript">
window.onload=function(){
var para=document.createElement("p");
var testdiv=document.getElementById("testdiv");
testdiv.appendChild(para);
var txt=document.createTextNode("hello word");
para.appendChild(txt);
}
</script>
</head>
<body>
<div id="testdiv"></div>
</body>
</html>insertBefore()方法:
这个方法将一个新元素插入到一个现有元素的前面。
（1）新元素：你想插入的元素（newElement）
（2）目标元素：你想把这个新元素插入到哪个元素（targetElement）之前
（3）父元素：目标元素的父元素（parentElement）
parentElement.insertBefore(newElement,targetElement);
insertAfter()方法:
将新的元素插入另一个元素之后
图片改进版:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Images Gallery</title>
<style type="text/css">
body{
font-family: "Helvetica","Arial",serif;
color:#333;
background: #ccc;
margin: 1em 10px;
}
h1{
color: #333;
background: transparent;//背景透明
}
a{
color: #c60;
background: transparent;
font-weight: bold;
text-decoration: none;
}
ul{
padding: 0;
}
li{
float: left;
padding: 1em;
list-style: none;
}
#imagegally{
list-style: none;
}
#imagegally li{
display: inline;
}
#imagegally li a img{
border: 0;
}
#placeholder{
width: 900px;
height: 500px;
}
img{
display: block;
clear: both;//清除浮动
}
</style>
<script type="text/javascript">
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload != 'function'){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}
function insertAfter(newElement,targetElement){
var parent=targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
function preparePlaceholder(){
if(!document.createElement) return false;
if(!document.createTextNode) return false;
if(!document.getElementById) return false;
if(!document.getElementById("imagegallery")) return false;
var placeholder=document.createElement("img");
placeholder.setAttribute("id","placeholder");
placeholder.setAttribute("src","5.jpeg");
placeholder.setAttribute("alt","my images gallery");
var description=document.createElement("p");
description.setAttribute("id","description");
var desctext=document.createTextNode("Choose an image");
description.appendChild(desctext);
var gallery=document.getElementById("imagegallery");
insertAfter(placeholder,gallery);
insertAfter(description,placeholder);
}
function prepareGallery(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById("imagegallery")) return false;
var gallery=document.getElementById("imagegallery");
var links=gallery.getElementsByTagName("a");
for(var i=0;i<links.length;i++){
links[i].onclick=function(){
//return !showPic(this);//是否返回一个false值以取消onclick时间的默认行为,其实应该由showPic函数决定.如果成功返回true,如果失败返回false
return showPic(this);
}
links[i].onkeypass=links[i].onclick;
}
}
function showPic(whichpic){
if(!document.getElementById("placeholder")) return true;
var source=whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if(!document.getElementById("description")) return false;
if(whichpic.getAttribute("title")){
var text=whichpic.getAttribute("title");
}else{
var text="";
}
var description=document.getElementById("description");
if(description.firstChild.nodeType == 3){
description.firstChild.nodeValue=text;
}
return false;
}
addLoadEvent(preparePlaceholder)
addLoadEvent(prepareGallery);
</script>
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="1.jpeg" title="1">
<img src="1.jpeg" alt="1">
</a>
</li>
<li>
<a href="2.jpeg" title="2">
<img src="2.jpeg" alt="2">
</a>
</li>
<li>
<a href="3.jpeg" title="3">
<img src="3.jpeg" alt="3">
</a>
</li>
<li>
<a href="4.jpeg" title="4">
<img src="4.jpeg" alt="4">
</a>
</li>
</ul>
</body>
</html>
1470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
