插入标记(innerHTML)和插入文本的区别(innerText)

插入标记:

innerHTML

outerHTML

insertAdjacentHTML()

插入文本:

innerText

outerText

●innerHTML:(不同浏览器返回的innerHTMl值可能不同)

->在读模式下,innerHTMl属性返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的HTML标记。

->在写模式下,in0nerHTML会根据指定的值创建新的DOM树,然后用这个DOM树完全替换调用元素原先的所有子节点。

->使用innerHTML的三点注意事项:

插入标记(innerHTML)和插入文本的区别(innerText)_第1张图片
1.读写,不同的浏览器有时候其显示的值以及写入时渲染出来的值可能都不尽相同
2.通过innerHTML插入SCRIPT和STYLE等需要注意相关事项
插入标记(innerHTML)和插入文本的区别(innerText)_第2张图片
3.如上
插入标记(innerHTML)和插入文本的区别(innerText)_第3张图片

●outerHTML:

->在读模式下,outerHTML返回调用它的元素及所有子节点的HTML标签。

->在写模式下,outerHTML会根据指定的HTML字符串创建新的DOM子树,然后用这个DOM子树完全替换调用元素。

你可能感兴趣的:(插入标记(innerHTML)和插入文本的区别(innerText))