您的位置：首页 > Web前端 > HTML

增加HTML元素

2016-04-07 20:01 363 查看

1. 复制、添加节点

创建节点通常借助document对象的createElement方法来实现，语法如下：

创建一个节点的开销可能过大，实际上我们还可以复制一个已有的节点，复制已有节点的系统开销略小。通过Node的cloneNode()方法即可复制一个已有节点，该方法的语法格式如下。

下面我们来看一个例子。

<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(Owen.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 复制节点 </title>
</head>
<body>
<ul id = "d">
<li>疯狂Java讲义</li>
</ul>
<script type="text/javascript">
// 获取ID为d的节点
var ul = document.getElementById("d");
// 复制ul的第二个子节点（不复制当前节点的后代节点）
var ajax = ul.firstChild.nextSibling.cloneNode(false);
// 修改被复制的节点
ajax.innerHTML = "Ajax";
// 将复制的节点添加到页面中
ul.appendChild(ajax);
</script>
</body>
</html>

运行的结果如下：

如上面所看到的，当一个节点创建成功后，一定要将该节点添加到DOM中才行。对于普通的节点，可采用Node对象的如下方法来添加节点：

下面我们来看个例子：

<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(owen.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 复制节点 </title>
</head>
<body>
<ul id = "d">
<li>Java</li>
</ul>
<script type="text/javascript">
// 获取ID为d的节点
var ul = document.getElementById("d");
// 复制ul的第二个子节点（不复制当前节点的后代节点）
var ajax = ul.firstChild.nextSibling.cloneNode(false);
// 修改被复制的节点
ajax.innerHTML = "Ajax";
// 将复制的节点添加到页面中
ul.insertBefore(ajax , ul.firstChild);
</script>
</body>
</html>

运行结果：

2. 为列表框、下拉菜单添加选项

为列表框、下拉菜单添加子节点，也就是为列表框、下拉菜单添加选项。添加选项有两种方法：

1) 调用HTMLSelectElement的add()方法添加选项

2) 直接为<select…/>的指定选项赋值

HTMLSelectElement包含如下的方法用于添加新选项。

下面通过代码来示例。

<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(Owen.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 添加选项 </title>
</head>
<body id="test">
<script type="text/javascript">
// 创建<select.../>对象
var a = document.createElement("select");
// 为<select.../>对象增加10个选项
for (var i = 0 ; i < 10 ; i++)
{
// 创建一个<option.../>元素
var op = document.createElement("option");
op.innerHTML = '新增的选项' + i;
// 将新的选项添加到列表框的最后
a.add(op , null);

//也可以用下面的方法  二
// 创建一个<option.../>元素
//var op = new Option('新增的选项' + i , i);
// 直接为指定选项赋值
//a.options[i] = op;
}
// 设置列表框高度为5
a.size = 5;
// 将列表框增加成body元素的子节点
document.getElementById("test").appendChild(a);
</script>
</body>
</html>

运行结果：

3. 动态添加表格内容

表格元素、表格行则另有添加子元素的方法。实际上，它们可以在添加子元素的同时创建这些子元素。也就是说，添加表格子元素时，往往无须使用document的createElement()方法来创建节点。

HTMLTableElement对象有如下方法：

HTMLTableRowElement对象代表表格行，该对象包含如下方法用于插入单元格。

下面通过脚本在页面中生成一个表格：

<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(owen.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 添加表格 </title>
</head>
<body id="test">
<script type="text/javascript">
// 创建一个表格对象
var a = document.createElement("table");
// 设置表格的边框为1
a.border=1;
var caption = a.createCaption();
caption.innerHTML = "表格标题";
// 为表格循环插入5行
for (var i = 0 ; i < 5 ; i++)
{
// 插入行
var tr = a.insertRow(i);
// 为每行循环插入7列
for (var j = 0 ; j < 7 ; j++)
{
// 循环插入7列
var td = tr.insertCell(j);
// 设置每个单元格的内容
td.innerHTML = "单元格内容 " + i + j;
}
}
//将表格元素添加到HTML文档内
document.getElementById("test").appendChild(a);
</script>
</body>
</html>

运行结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航