关于使用innerHTML属性插入大量代码(有换行)

最新推荐文章于 2023-07-07 14:26:24 发布

独孤裕美

最新推荐文章于 2023-07-07 14:26:24 发布

阅读量3.8k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：学习前端文章标签： innerHTML 引号换行问题

本文链接：https://blog.youkuaiyun.com/qq_43634202/article/details/97522910

学习同时被 2 个专栏收录

12 篇文章

订阅专栏

前端

1 篇文章

订阅专栏

问题环境:

由于想创建一个能够自适应窗口的网站,所以想着html结构能够动态改变,因为需要大刀阔斧的改动,所以选择了innerHTml,然而在使用过程中却出现了问题

代码:

html源代码:

<div id="plat_container_1">
</div>

预想插入后的代码:

<div id="plat_container_1">
	<div class="change_plat" id="div_plat">
		<div class="plat">
			<div class="num num_1">
				<p>Microsoft</p>
				<a href="#">XBOX 360</a>
				<a href="#">XBOX ONE</a>
			</div>
			<div class="num num_2">					
				<p>PlayStation</p>
				<a href="#">PlayStation 3</a>
				<a href="#">PlayStation 4</a>
				<a href="#">PlayStation Vita</a>
			</div>
		</div>
	<a href="#"><div class="num num_special"><span>Retor Console</span></div></a>
</div>

踩坑过程:

原本想着,一下子全放入innerHTML中,然而直接出现错误,""无法处理换行,~~于是将其全部放在一行上~~

于是将其分开插入其中,运行时无错误,然而打开后却发现之前的css样式无效.经过反复排查后,发现错误原因是浏览器自动处理了错误(它认为的),自动添加了代码.

js代码:

var plat_1 = document.getElementById('plat_container_1');
		plat_1.innerHTML = "";
		plat_1.innerHTML += '<div class="change_plat" id="div_plat">';
		plat_1.innerHTML += '<div class="plat">';
		plat_1.innerHTML += '<div class="num num_1">';
		plat_1.innerHTML += '	<p>Microsoft</p>';
		plat_1.innerHTML += '	<a href="#">XBOX 360</a>';
		plat_1.innerHTML += '	<a href="#">XBOX ONE</a>';
		plat_1.innerHTML += '</div>';
		plat_1.innerHTML += '<div class="num num_2">';			
		plat_1.innerHTML += '	<p>PlayStation</p>';
		plat_1.innerHTML += '	<a href="#">PlayStation 3</a>';
		plat_1.innerHTML += '	<a href="#">PlayStation 4</a>';
		plat_1.innerHTML += '	<a href="#">PlayStation Vita</a>';
		plat_1.innerHTML += '</div>';
		plat_1.innerHTML += '<a href="#"><div class="num num_special"><span>Retor Console</span></div></a>';
		plat_1.innerHTML += '</div>';

实际上,浏览器处理后的代码:

<div id="plat_container_1">
	<div class="change_plat" id="div_plat"></div>
		<div class="plat"></div>
			<div class="num num_1"></div>
				<p>Microsoft</p>
				<a href="#">XBOX 360</a>
				<a href="#">XBOX ONE</a>
			<div class="num num_2"></div>	
				<p>PlayStation</p>
				<a href="#">PlayStation 3</a>
				<a href="#">PlayStation 4</a>
				<a href="#">PlayStation Vita</a>
	<a href="#"><div class="num num_special"><span>Retor Console</span></div></a>

最终处理方式:

其实处理方式很简单,大量代码插入时,只需在每行后多写一个"",即可解决""无法处理换行的问题
真确的代码:

var plat_1 = document.getElementById('plat_container_1');
	plat_1.innerHTML = '<div class="change_plat" id="div_plat">\
						<div class="plat">\
							<div class="num num_1">\
								<p>Microsoft</p>\
								<a href="#">XBOX 360</a>\
								<a href="#">XBOX ONE</a>\
							</div>\
							<div class="num num_2">\
								<p>PlayStation</p>\
								<a href="#">PlayStation 3</a>\
								<a href="#">PlayStation 4</a>\
								<a href="#">PlayStation Vita</a>\
							</div>\
							<div class="num num_3">\
								<p>Nintendo</p>\
								<a href="#">3DC</a>\
								<a href="#">Wiiu</a>\
								<a href="#">Wii</a>\
								<a href="#">Switch</a>\
							</div>\
							<div class="num num_4">\
								<p>Others</p>\
								<a href="#">PC</a>\
								<a href="#">Mobile</a>\
							</div>\
						</div>\
						<a href="#"><div class="num num_special"><span>Retor Console</span></div></a>\
					</div>';