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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 《大厂面试》面试官看了直呼想要的简历

    《大厂面试》面试官看了直呼想要的简历

    2022年2月12日
    64
  • MongoDB运行状态、性能监控与分析

    MongoDB运行状态、性能监控与分析

    2021年8月27日
    32
  • 1602驱动电路_lcd1602的a和k接哪里

    1602驱动电路_lcd1602的a和k接哪里       今天我也开博了,一个前辈的话对我触动很大:不会分享,不懂总结,就不要做技术。这也是我这博客的目的,望各路过高手菜鸟多多指教。          搞了几天的1062a终于调通了。前段时间把8位总线的调通了,这个简单,网上资料也多。以前写程序一般都是网上找资料后自已再改,这次1062a四位驱动的程序网上也有,我下了好多版本结果都不行,就这样我也堵在这几天了。这说明我的底层程序

    2022年9月22日
    0
  • [转载]Asp.net MVC 2 + Castle + NHibernate 项目实战(1)

    [转载]Asp.net MVC 2 + Castle + NHibernate 项目实战(1)

    2021年8月15日
    53
  • 如何新建vue项目(如何配置vue的开发环境)

    一、vue开发环境搭建1、安装nodejs步骤:在node官网(https://nodejs.org/en/download/)选择跟自己的电脑匹配的版本进行下载,然后一步步的安装即可,在cmd控制台输入node-v,如果出现版本信息即表示安装成功。2、npm包管理器是集成在node中的,所以直接输入npm-v就能查看到版本信息,若出现版本信息则表示npm能正常使用。3、输入npminstall-gcnpm–registry=http://registry.npm.taobao.o

    2022年4月15日
    73
  • 学习MySQL这一篇就够了

    第一章数据库概述1.1、数据库的好处将数据持久化到本地提供结构化查询功能1.2、数据库的常见概念DB:数据库,存储数据的仓库DBS:数据库管理系统,又称为数据库软件或者数据库产品,用于创建和管理DB,常见的有MySQL、Oracle、DB2、SQLServerSQL:结构化查询语言,用于和数据库通信的语言,不是某个数据库软件特有的,而是几乎所有的主流数据库软件通用的语言1.3、数据库的存储特点数据存放到表中,然后表再放到库中一个库中可以有多张表,每张表具有唯一的表名用来标识

    2022年4月7日
    62

发表回复

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

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