JS从html创建DOM

我们平时创建dom时都是通过document.createElement来创建的,对于复杂的结构如表格,包含样式等就很麻烦.类似jquery的$(html)
有没有简单的方法呢?

使用template 模板创建

function createElementHtml(html){
    const template=document.createElement("template");
    template.innerHTML=html.trim();

    return template.content.firstChild;
}

var html=`<table border="1" cellspacing="0" >
  <tr style="color:red"><td>序号</td><td>名称</td></tr>
   <tr><td>1</td><td>张三</td></tr>
   <tr><td>2</td><td>李四</td></tr>
 </table>
`


const table=createElementHtml(html);

document.body.appendChild(table);

原理: 利用template标签创建后不会被渲染. 再返回第一个元素.

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/template

template有一个只读属性content,content里包含所有dom节点.

避免空白元素影响,先用trim去掉空白,再取第一个元素.

下一节,细说<template>标签的来源作用.

原作者:阿金
本文地址：https://hi-arkin.com/archives/template-dom.html