动态生成表格

夜夜夜璟归

于 2022-08-26 11:55:49 发布

阅读量1.1k

点赞数

文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/m0_72313625/article/details/126540606

版权

这篇博客介绍了三种动态创建HTML元素的方法，包括document.write()、element.innerHTML()和document.createElement()，并重点讲解了如何使用这些方法动态生成表格。通过模拟学生数据，创建tbody中的行和单元格，实现了动态表格的构建，特别强调了最后一列单元格作为删除按钮的处理方式。

摘要由CSDN通过智能技术生成

1.三种动态创建元素的方式以及区别

1）document.write(); 直接将内容写入页面内容流。但是文档流执行完毕，会导致页面重绘。

	
    <button>点击</button>
        //这个对开发者来说并不是很友好，开发过程中我们很少会使用
			var btn = document.querySelector('button');
			btn.onclick = function() {
				document.write('<div>123</div')
			}
			//页面重绘，将之前的html页面删除了，只保留最新生成的页面

2） element.innerHtml(); 将内容写入某个DOM节点，页面内容不会重绘

// 2.element.innerHTML
            <div class="inner"></div>
			var inner = document.querySelector('.inner');
			// for (var i = 0 i <= 100; i++) {
			// 	inner.innerHTML += '<a href = "#">百度</a>';
			// }
			//这个采取的是拼接字符串的方式，花费的时间比较长效率就会比较低
			
			var  arr = [];
			for (var i = 0 i <= 100; i++){
				arr.push( '<a href = "#">百度</a>');
			}
			inner.innerHTML=arr.join('')
			// join是将数组转化为字符串

3）document.createElement(); 创建多个元素效率低点，但是结构清晰。