[object HTMLDivElement] 创建dom报与 innerHTML appendChild使用

冥想的声音

于 2020-09-30 09:30:26 发布

阅读量1.3k

点赞数

分类专栏： html DOM js 文章标签： dom js javascript

本文链接：https://blog.csdn.net/qq_28134589/article/details/108879840

版权

html 同时被 3 个专栏收录

5 篇文章

订阅专栏

5 篇文章

订阅专栏

DOM

2 篇文章

订阅专栏

本文解析了如何避免DOM操作中常见的错误，如错误地使用innerHTML与appendChild。学习了如何通过模板字符串插入HTML、区分并正确运用innerHTML和appendChild，以及它们在实际开发中的应用场景。

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

在创建DOM , 插入DOM报错，其实是一种错误的写法。

错误演示

			var a = document.createElement('div') //**创建DOM*//
			a.innerText = '123'
			// document.body.appendChild(a) //正常使用不报错
			document.body.innerHTML= a    	//错误使用报错  页面显示  [object HTMLDivElement]

正确使用
innerHTML 插入的是模版字符串（推荐使用更灵活）
appendChild 插入的是标签对象

			var b  = `<div>2222</div>`
			document.getElementById('body').innerHTML = b
			
			//innerHTML  删除父元素里面内容，然后重新写入
			
			var a = document.createElement('div') //**创建DOM*//
			a.innerText = '123'
			document.body.appendChild(a)
			//appendChild 不会影响其他item，在后面添加item，这样刷新的内容就是添加的内容