原生js使用insertAdjacentHTML实现jquery中的append功能

1.作用

元素内通过字符串添加节点

2.jquery中使用

$ele.append('<div id="two">two</div>');

3.原生api

var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

第一个参数为插入的位置

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

4.其它方法appendChild

参数必须为node类型，通过createElement创建，遇到多层嵌套，较为繁琐

5.另一种方法innerHTML拼接

先获取本来的innerHTML和新追加的部分拼接到一起，再重新赋值给innerHTML

6.如何把字符串模板转为node节点

var str='<div><span>aaa</span></div>';
let tempNode = document.createElement('div');
tempNode.innerHTML = str;
var strNode = tempNode.firstChild;    //或firstElementChild

7.获取最后一个子元素

$el.lastElementChild;

参考链接：https://www.jb51.net/article/145883.htm