JsGallery-basis-2

Posted on | In | Visitors:

动态创建标记。
示例文档：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Test</title>
</head>
<body>
	<script>
		document.write("<p>This is inserted.</p>");
	</script>
	<div id="testdiv">	
	</div>
</body>
</html>

createElement 方法

如果想把一段文本插入 testdiv 元素，（用 DOM 语言说，想添加一个 p 元素节点，并把这个节点作为 div 元素节点的一个子节点）。需要两个步骤完成：

  1. 创建一个新的元素；
  2. 把这个新元素插入节点数；

创建一个新元素使用 createElement 方法，语法：

1
document.createElement(nodeName)

eg :

1
document.createElement("p")

这个方法本身并不影响页面表现，还需要将新创的元素插入到文档中去。为此，需要有个东西来引用这个新创的节点。（不论何时何地，使用了 createElement 方法，最好将新创的元素赋给一个变量）。

1
var para = document.createElement("p")

这个新创的 p 元素还不是任何一棵 DOM 节点树的组成部分，称为文档碎片（document fragment）。但其现在已经有了一个 nodeType 和一个 nodeName 值。

appendChild 方法

将新创的节点插入到某个文档的节点树的最简单的办法是，让它成为这个文档某个现有节点的一个子节点。
appendChild 语法：

1
parent.appendChild(child)

eg ：

1
2
3
4
5
6
7
8
9
# -*- coding: utf-8 -*-
var testdiv = document.getElementById("testdiv");
// 变量testdiv 现在包含着一个指向那个 id 等于 testdiv 的元素的引用
var para = document.createElement("p");
// 创建了一个 para 变量，它包含一个指向刚创建的那个 p 元素的引用
testdiv.appendChild(para);
// 把变量 para 插入变量 testdiv

createTextNode方法

现在已经创建出了一个元素节点并将其插入了文档的节点树，这个节点是一个空白的 p 元素。如果想把一些文本放入这个 p 元素，需要创建一个文本节点。
createTextNode 语法：

1
document.createTextNode(text)

eg ：

1
2
var txt = document.creataTextNode("Hello World")；
para.appendChild(txt);

可将以下代码写入 example.js 文件，重新加载 test.html 文件

1
2
3
4
5
var para = document.creataElement("p");
var testdiv = getElementById("testdiv");
testdiv.appendChild(para);
var txt = document.createTextNode("Hello World");
para.appendChild(txt);

微小的总结

上述例子是按照如下顺序来创建和插入节点的：

  1. 创建一个 p 节点；
  2. 把这个 p 节点追加到 test.html 文档中的一个元素节点上；
  3. 创建一个文本节点；
  4. 把这个文本节点追加到刚才创建的那个 p 元素节点上。

appendChild 方法还可以用来连接那些尚未成为文档树一部分的节点，即也可以按如下顺序：

  1. 创建一个 p 元素节点；
  2. 创建一个文本节点；
  3. 把这个文本节点追加到第1步创建的 p 元素节点上；
  4. 把这个 p 元素节点追加到 test.html 文档中的一个元素节点上。
1
2
3
4
5
var para = document.creataElement("p");
var txt = document.creataTextNode("Hello World");
para.append(txt);
var testdiv = document.getElementById("testdiv");
testdiv.appendChild(para);