动态创建标记（js dom编程艺术之第七章笔记）
2016-09-22 21:32
351 查看
第七章 动态创建标记
7.1一些传统的方法
7.1.1document.write
<body>
<script type="text/javascript">
insertParagraph("我的小宝儿");
</script>
</body>
外部Js文件
function insertParagraph(text) {
var str = "<p>";
str += text;
str += "</p>";
document.write(str);
}
7.1.2innerHTML属性
源代码
<body>
<div id="testdiv">
<p>This is <em>my</em> content.</p>
</div>
</body>
</html>外部js文件
window.onload = function() {
var testdiv = document.getElementById("testdiv");
alert(testdiv.innerHTML);
}
结果：
外部js文件
window.onload = function() {
var testdiv = document.getElementById("testdiv");
testdiv.innerHTML="<p>change <em>this</em> content.</p>}结果：
div里面的元素被替换
7.2DOM方法
7.2.3createElement方法
7.2.3appenChild方法
7.2.3createNode方法
源代码
<body> <div id="testdiv"> </div> </body> </html>
外部js文件
window.onload = function() {
var para = document.createElement("p");
var testdiv = document.getElementById("testdiv");//创建新元素
testdiv.appendChild(para);//新元素插入testdiv中
var txt = document.createTextNode("Hello world");//创建文本节点
para.appendChild(txt);
}
或者
window.onload = function() {
var para = document.createElement("p");
var txt = document.createTextNode("Hello world");
para.appendChild(txt);
var testdiv = document.getElementById("testdiv");
testdiv.appendChild(para);
}
结果：
加载html文件时出现Hello world
7.2.4一个更复杂的组合
源代码
任务：创建 <p>This is <em>my</em> content.</p>
外部js文件
window.onload = function() {
var para = document.createElement("p");
var txt1 = document.createTextNode("I inserted ");
para.appendChild(txt1);
var emphasis = document.createElement("em");
var txt2 = document.createTextNode("this");
emphasis.appendChild(txt2);
para.appendChild(emphasis);
var txt3 = document.createTextNode(" content.");
para.appendChild(txt3);
var testdiv = document.getElementById("testdiv");
testdiv.appendChild(para);
}
7.3重回图片库
源代码：
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="images/fireworks.jpg" title="A fireworks display">
<img src="images/thumbnail_fireworks.jpg" alt="Fireworks" />
</a>
</li>
<li>
<a href="images/coffee.jpg" title="A cup of black coffee" >
<img src="images/thumbnail_coffee.jpg" alt="Coffee" />
</a>
</li>
<li>
<a href="images/rose.jpg" title="A red, red rose">
<img src="images/thumbnail_rose.jpg" alt="Rose" />
</a>
</li>
<li>
<a href="images/bigben.jpg" title="The famous clock">
<img src="images/thumbnail_bigben.jpg" alt="Big Ben" />
</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<p id="description">Choose an image.</p>
</body>
</html>任务：
用dom创建以下
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<p id="description">Choose an image.</p>
js外部文件
function preparePlaceholder() {
if (!document.createElement) return false;
if (!document.createTextNode) return false;
var placeholder = document.createElement("img");
placeholder.setAttribute("id","placeholder");
placeholder.setAttribute("src","images/placeholder.gif");
placeholder.setAttribute("alt","my image 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");
document.getElementsByTagName("body")[0].appendChild(placeholder);
document.getElementsByTagName("body")[0].appendChild(description);
}
7.3.1在已有元素前插入一个新元素
insertBefore()方法
任务：
将placeholde和description插入到gallery元素之前
function preparePlaceholder() {
if (!document.createElement) return false;
if (!document.createTextNode) return false;
var placeholder = document.createElement("img");
placeholder.setAttribute("id","placeholder");
placeholder.setAttribute("src","images/placeholder.gif");
placeholder.setAttribute("alt","my image 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");
gallery.parentNode.insertBefore(placeholder,gallery);
gallery.parentNode.insertBefore(description,gallery);
}7.3.2在现有元素后插入一个新元素
1、编写insertAfter函数
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}2、使用insertAfter函数
js外部文件
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","images/placeholder.gif");
placeholder.setAttribute("alt","my image 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);
}7.3.3图片库最终完成的js文件
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","images/placeholder.gif");
placeholder.setAttribute("alt","my image 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,plac
4000
eholder);
}
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);
}
links[i].onkeypress = 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);
7.4Ajax
7.1一些传统的方法
7.1.1document.write
<body>
<script type="text/javascript">
insertParagraph("我的小宝儿");
</script>
</body>
外部Js文件
function insertParagraph(text) {
var str = "<p>";
str += text;
str += "</p>";
document.write(str);
}
7.1.2innerHTML属性
源代码
<body>
<div id="testdiv">
<p>This is <em>my</em> content.</p>
</div>
</body>
</html>外部js文件
window.onload = function() {
var testdiv = document.getElementById("testdiv");
alert(testdiv.innerHTML);
}
结果：
<p>This is <em>my</em> content.</p>
外部js文件
window.onload = function() {
var testdiv = document.getElementById("testdiv");
testdiv.innerHTML="<p>change <em>this</em> content.</p>}结果：
div里面的元素被替换
7.2DOM方法
7.2.3createElement方法
7.2.3appenChild方法
7.2.3createNode方法
源代码
<body> <div id="testdiv"> </div> </body> </html>
外部js文件
window.onload = function() {
var para = document.createElement("p");
var testdiv = document.getElementById("testdiv");//创建新元素
testdiv.appendChild(para);//新元素插入testdiv中
var txt = document.createTextNode("Hello world");//创建文本节点
para.appendChild(txt);
}
或者
window.onload = function() {
var para = document.createElement("p");
var txt = document.createTextNode("Hello world");
para.appendChild(txt);
var testdiv = document.getElementById("testdiv");
testdiv.appendChild(para);
}
结果：
加载html文件时出现Hello world
7.2.4一个更复杂的组合
源代码
<body> <div id="testdiv"> </div> </body> </html>
任务：创建 <p>This is <em>my</em> content.</p>
外部js文件
window.onload = function() {
var para = document.createElement("p");
var txt1 = document.createTextNode("I inserted ");
para.appendChild(txt1);
var emphasis = document.createElement("em");
var txt2 = document.createTextNode("this");
emphasis.appendChild(txt2);
para.appendChild(emphasis);
var txt3 = document.createTextNode(" content.");
para.appendChild(txt3);
var testdiv = document.getElementById("testdiv");
testdiv.appendChild(para);
}
7.3重回图片库
源代码：
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="images/fireworks.jpg" title="A fireworks display">
<img src="images/thumbnail_fireworks.jpg" alt="Fireworks" />
</a>
</li>
<li>
<a href="images/coffee.jpg" title="A cup of black coffee" >
<img src="images/thumbnail_coffee.jpg" alt="Coffee" />
</a>
</li>
<li>
<a href="images/rose.jpg" title="A red, red rose">
<img src="images/thumbnail_rose.jpg" alt="Rose" />
</a>
</li>
<li>
<a href="images/bigben.jpg" title="The famous clock">
<img src="images/thumbnail_bigben.jpg" alt="Big Ben" />
</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<p id="description">Choose an image.</p>
</body>
</html>任务：
用dom创建以下
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<p id="description">Choose an image.</p>
js外部文件
function preparePlaceholder() {
if (!document.createElement) return false;
if (!document.createTextNode) return false;
var placeholder = document.createElement("img");
placeholder.setAttribute("id","placeholder");
placeholder.setAttribute("src","images/placeholder.gif");
placeholder.setAttribute("alt","my image 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");
document.getElementsByTagName("body")[0].appendChild(placeholder);
document.getElementsByTagName("body")[0].appendChild(description);
}
7.3.1在已有元素前插入一个新元素
insertBefore()方法
任务：
将placeholde和description插入到gallery元素之前
function preparePlaceholder() {
if (!document.createElement) return false;
if (!document.createTextNode) return false;
var placeholder = document.createElement("img");
placeholder.setAttribute("id","placeholder");
placeholder.setAttribute("src","images/placeholder.gif");
placeholder.setAttribute("alt","my image 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");
gallery.parentNode.insertBefore(placeholder,gallery);
gallery.parentNode.insertBefore(description,gallery);
}7.3.2在现有元素后插入一个新元素
1、编写insertAfter函数
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}2、使用insertAfter函数
js外部文件
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","images/placeholder.gif");
placeholder.setAttribute("alt","my image 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);
}7.3.3图片库最终完成的js文件
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","images/placeholder.gif");
placeholder.setAttribute("alt","my image 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,plac
4000
eholder);
}
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);
}
links[i].onkeypress = 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);
7.4Ajax
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Javascript“预编译”理解
- Caused by: Parent package is not defined: json-default - [unknown location]
- JavaScript Cookies
- 20160916------JSP基本语法
- JavaScript基础知识
- javascript实现页面滚屏效果
- JSP动作元素2
- 关于JSON的那些事儿
- JSONP
- javascript动画系列第一篇——模拟拖拽
- JS开发中常用的小技巧
- JS核心系列：浅谈原型对象和原型链
- JavaScript 全局对象
- JavaScript escape() 函数
- jsp内置对象之response对象
- javascript时间戳和日期字符串相互转换（json）
- [JS]同页面图片点击切换.
- JavaScript事件小例子
- 表达式语言（EL）---JSP
- js单链式运算