js插入字符串表示的元素（insertAdjacentHTML）

我们之前使用的插入元素的方法为appendChild，该方法可以在元素内部的末尾插入一个元素
但是这个方法使用起来不太友好，因为它需要传入一个元素，所以往往我们需要使用document.create先创建一个元素才能进行插入操作
如果需要创建的元素存在很多嵌套关系，例如

<div>
	<ul>
		<li>
			<p></p>
		</li>
		<li></li>
	</ul>
</div>

那么使用document.create和appendChild来一个一个创建插入元素是很麻烦的。

使用insertAdjacentHTML则可以避免这样的麻烦，因为它支持用字符串表示html元素
例如当我们想在body上插入以上结构的html元素时，我们只需要使用以下写法就能很轻松的插入想要的结构

let struct = `<div>
	<ul>
		<li>
			<p></p>
		</li>
		<li></li>
	</ul>
</div>`;
document.body.insertAdjacentHTML("beforeend", struct);//第一个参数填beforeend表示在元素内部末尾插入新元素，其它可选值还有beforebegin表示在元素外部前面插入新元素，afterbegin表示在元素内部前面插入新元素，afterend表示在元素外部后面插入新元素