DOM编程学习（3）增加HTML元素

最新推荐文章于 2024-06-18 17:29:31 发布

原创最新推荐文章于 2024-06-18 17:29:31 发布 · 571 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何使用DOM API进行节点的创建、复制、添加和替换，包括列表框、下拉菜单选项的动态添加方法，以及表格内容的动态更新技巧。通过实际代码示例，读者可以学习到如何利用JavaScript操作HTML文档，实现网页的动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.创建或复制节点

document.createElement(Tag)：创建Tag标签对应的节点

Node cloneNode(boolean deep):复制当前节点，当deep为true时，表示复制当前节点时也会复制全部后代节点，为false时，只会复制当前节点

2.添加节点

appendChild(Node newNode)：将newNode添加为当前节点的最后一个节点

insertBefore(Node newNode,Node refNode)：在refNode节点之前插入newNode节点

replaceChild(Node newChild,Node oldChild)：将oldChild节点替换成newNode节点

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

使用add()方法添加选项

<body id="test">
	<script type="text/javascript">
		
	var a = document.createElement("select");
	for(var i=0;i<10;i++){
		var op = document.createElement("option");
		op.innerHTML='新增'+i;
		a.add(op,null)
	}
	a.size=5;
	document.getElementById("test").appendChild(a);
	</script>	
</body>

直接为<select../>指定选项赋值

new Option(text,value,defaultSelected,selected)

text：选项的文本，即内容

value:选项的值

defaultSelected：指定选项是否默认选中

selected：指定选项是否选中

<body id="test">
	<script type="text/javascript">
		
	   var a = document.createElement("select");
	   a.style.width="200px";
	   for (var i=0;i<10;i++){
		  var op= new Option('新增的选项'+i,i);
		  a.options[i]=op;
	   }
	   a.size=5;
	   document.getElementById("test").appendChild(a);
	</script>	
</body>

4.动态添加表格内容

insertRow():在index处插入一行

createCaption()：创建表格标题

createTFoot()：创建<tfoot../>元素

crerteTHead()：创建<thead../>元素

insertCell(long index)：在表格行内创建单元格

<body id="test">
	<script type="text/javascript">
		
		var a = document.createElement("table");
		a.style.width="800px";
		a.style.borderCollapse="collapse";
		a.border=1;
		var caption=a.createCaption();
		caption.innerHTML="表格标题";
		for(var i = 0; i<5;i++){
			var tr = a.insertRow(i);
			for(var j=0;j<7;j++){
				var td =tr.insertCell(j);
				td.style.padding="5px";
				td.innerHTML="单元格内容"+i+j;
			}
		}
		document.getElementById("test").appendChild(a);
	</script>	
</body>