template你还以为是vue创造的吗?

---

前言

今儿公司有个面试的,说自己有三年经验,我就问她template是什么?她说,这不是vue中的模板标签吗?今儿有时间,好好唠唠这个嗑!.

---

一、js插入元素

原生js中最常用的两种向页面中插入标签的方法是

• innerHTML

1 大量插入新的HTML使用innerHTML更加的便捷,其底层直接用HTML解析器解析(位于浏览器底层,通常为c++),比js代码快的多.
2 若页面中使用用户提供的信息,则要防止XSS攻击,这回让人头疼!

• appendChild()

1 首先创建节点,再向父节点追加,这样做特别麻烦,完全和标记无关.
2 需要多次的操作dom节点,甚至引起DOM树的重新渲染.

二、template 这个好家伙

1.它是这么想的

• 提前在页面中做出特殊标记,让浏览器自动解析为DOM子树.
• 但是不会去渲染,而是等待后续的加载.

2.撸它

html中这么写,这么看

  <template id="foo">
    <p>见过你的美,还能爱上谁?</p>
  </template>

1. 上面代码不会渲染到浏览器中,以为template的内容不属于活动文档.

2. 使用 querySelector() 获取不到p标签内容.
   

3. p标签包含在html模板的DocumentFragment 节点中
   

4. content 属性 获取DocumentFragment
   

设置成想要的

• DocumentFragment是批量向html中添加元素的高效率工具.
• 给html中添加多个元素,连续用appendChild(),会导致多次布局重排.
• 使用DocumentFragment,添加多个节点,最多也就重排一次.

向给定的div中添加指定元素

 html 代码
  <div id