原生js 插入模板字符串标签代码方法

最新推荐文章于 2022-10-27 22:36:42 发布

helloCheng09

最新推荐文章于 2022-10-27 22:36:42 发布

阅读量3.2k

点赞数 2

本文链接：https://blog.csdn.net/weixin_44544388/article/details/106477566

版权

let cmp = `
<nav>
    <ul>
        <li>
            HOME
        </li>
        <li>
            LIST
        </li>
        <li>
            CENTER
        </li>
    </ul>
</nav>
`

document.querySelector('#app').insertAdjacentHTML('beforeEnd', cmp)

insertAdjacentHTML() 将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接innerHTML操作更快。

position是相对于元素的位置，并且必须是以下字符串之一：

beforebegin: 元素自身的前面。
afterbegin: 插入元素内部的第一个子节点之前。
beforeend: 插入元素内部的最后一个子节点之后。
afterend: 元素自身的后面。
text是要被解析为HTML或XML,并插入到DOM树中的字符串。