template你还以为是vue创造的吗?_template是vue独有的吗-CSDN博客

本文链接：https://blog.csdn.net/persis_in/article/details/123598958

本文探讨了JavaScript中的template标签，它不是Vue专有的，而是原生JS特性。template用于创建DOM子树，不立即渲染，可以提高效率，避免多次DOM操作导致的重排。文中介绍了如何利用template和DocumentFragment进行高效地元素插入和克隆。

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

前言

今儿公司有个面试的,说自己有三年经验,我就问她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>

上面代码不会渲染到浏览器中,以为template的内容不属于活动文档.
使用 querySelector() 获取不到p标签内容.
p标签包含在html模板的DocumentFragment 节点中
content 属性获取DocumentFragment

设置成想要的

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

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

 html 代码
  <div id="foo"> 
  
  </div>
  
 js代码
     const foo = document.getElementById('foo');

    // fragment 就像对应dom子数的最小化document对象,直接使用dom方法
    const fragment = new DocumentFragment();
    // 将节点对象都添加到DocumentFragment,实例化对象上
    fragment.appendChild(document.createElement('p'));
    fragment.appendChild(document.createElement('p'));
    fragment.appendChild(document.createElement('p'));

    console.log(fragment.children.length);  // 3
    // 追加到foo上
    foo.appendChild(fragment)
    // 所有的节点都转移到foo节点上,DocumentFragment 就为空
    console.log(fragment.children.length); // 0

在这里插入图片描述 使用template标签

也可以将template中的内容转移到指定标签中

html 代码
  <div id="foo">


  </div>
  <template id="bar">
    <p>小甜甜</p>
    <p>小番茄</p>
    <p>小辣椒</p>
  </template>
js代码
    const fooElement = document.getElementById('foo');
    const barTemplate = document.getElementById('bar');
    //  获取template中的documentFragment对象
    const barFragment = barTemplate.content;
    // 追加到div中
    fooElement.appendChild(barFragment)
  </script>

效果
在这里插入图片描述

克隆template中的内容

html代码
 <div id="foo">


  </div>
  <template id="bar">
    <p>小甜甜</p>
    <p>小番茄</p>
    <p>小辣椒</p>
  </template>
javascript
    const fooElement = document.getElementById('foo');
    const barTemplate = document.getElementById('bar');
    //  获取template中的documentFragment对象
    const barFragment = barTemplate.content;
    // documentFragment 对象后 追加到div中
    fooElement.appendChild(document.importNode(barFragment, true));