innerHTML和outerHTML的区别

innerHTML和outerHTML的区别为什么要总结innerHTML和outerHTML的区别呢,主要是在看vue.js官方文档时,看到生命周期时)]原生的方法有点忘了,所以要重拾起来。示例如下:<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″><metaname=”viewport”content=”width=device-width,initial-scale=1.0″>

大家好,又见面了,我是你们的朋友全栈君。

为什么要总结innerHTML和outerHTML的区别呢,主要是在看vue.js官方文档时,看到生命周期时
innerHTML和outerHTML的区别
原生的方法有点忘了,所以要重拾起来。

示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>outerHtml</title>
</head>
<body>
    <div id="app">
        <p>努力着</p>
        <p>从不放弃</p>
    </div>
    <script>
        const app = document.querySelector('#app');
        console.log(app.innerHTML); 
        // 会打印出 
        // <p>努力着</p>
        // <p>从不放弃</p>
        
        console.log(app.outerHTML);
        // 会打印出 
        // <div id="app">
        // <p>努力着</p>
        // <p>从不放弃</p>
        // </div>
    </script>
</body>
</html>

从上面的例子我们可以得出这样的方案

1.innerHTML 设置或获取位于对象内的HTML,不包括对象自己的标签

2.outerHTML设置或获取对象及其内容的HTML形式,包括对象自己的标签

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/148935.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号