HTML5中的DOM扩展（三）插入标记

theme: channing-cyan

这是我参与8月更文挑战的第24天，活动详情查看：8月更文挑战

今天我们说一下插入标记，我们熟悉的插入有innerHTML，其实还有几种和他类似的方法，我们展开说一下。

插入标记

我们之前用的api大多数都是获取元素内容，HTML5规范中定义了一个向标签元素内添加内容的方法。

innerHTML

innerHTML是向元素内插入一个字符串，注释或者文本标记，它会根据现在提供的内容重新渲染到DOM树上，替代之前元素包含的所有节点。

<p id="username" data-name="jackson">我是Jackson</p>
    const name = document.querySelector('#username');
    name.innerHTML = 'bear';

image.png

这里我们可以看到它确实被替换成了bear，注意是替换，并不是向后添加。

outerHTML

outerHTML是直接替换这个元素，新的内容直接替换旧的内容

<p id="username" data-name="jackson">我是Jackson</p>
     const name = document.querySelector('#username');
    let p = "<p>我是大熊G </p>";
    name.outerHTML = p;

image.png

这里我们看到整个标签都被替换掉了。

insertAdjacentHTML()和inserAdjacentText()

这俩个方法都接受俩个参数，第一个参数是固定的，必须是以下4中类型

"beforebegin"，插入当前元素前面，作为前一个同胞节点；

"afterbegin"，插入当前元素内部，作为新的子节点或放在第一个子节点前面；

"beforeend"，插入当前元素内部，作为新的子节点或放在最后一个子节点后面；

"afterend"，插入当前元素后面，作为下一个同胞节点

他们的第二个参数就和我们上面innerHTML和outerHTML中需要的属性一样了，我这里写一个方式吧。

 // 作为前一个同胞节点插入
name.insertAdjacentHTML("beforebegin", "<p>jackson!!!</p>"); 
name.insertAdjacentText("beforebegin", "jackson!!!"); 

image.png

我们上面代码示例就是作为前一个同胞节点插入。大家也可以看到页面确实显示了我的名字。

性能问题

我们虽然这样操作的话会比我们修改HTML中的内容方便，但是我们修改的内容如果还有其他绑定js事件或者操作，就会导致内存占用比较大，我们在用的时候一定要注意被替换的元素上所关联的js事件。

还有一个就是不要用循环来替换或者添加元素，这样每次是通过先获取再添加，也会占据很大的性能。

跨站脚本

这里必须提到跨站脚本攻击，我们比如有input输入框，里面需要用户输入内容，里面可能有其他不法分子通过给input框输入<script>....</script>,里面可能写一些烂七八糟的内容导致我们页面程序瘫痪。我们在用innerHTML的时候一定要进行转义或者隔离插入的数据。