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


相关推荐

  • Linux内核有没有rootfs,Linux内核rootfs的初始化过程[通俗易懂]

    Linux内核有没有rootfs,Linux内核rootfs的初始化过程[通俗易懂]由于在下水平相当有限,不当之处,还望大家批评指正^_^在Linuxshell中执行mount命令,通常可以看到某个做了文件系统的磁盘分区或flash分区或内存文件系统做为所谓的根文件系统被mount到了挂载点/处。实际上内核中最初始的根文件系统,并不是来自内核外部,他是由内核自己构建出来的。为了说明这个过程,我们先说说mount的过程。系统调用sys_mount是在fs/namespace.c…

    2022年9月28日
    0
  • porm文件中的build标签

    porm文件中的build标签分类    (1)全局配置(projectbuild)         针对整个项目的所有情况都有效    (2)配置(profilebuild)         针对不同的profile配置[html] viewplain copyproject xm

    2022年6月16日
    113
  • 深度理解Java中的static

    深度理解Java中的static目录一、static的用法:二、static的误区(问题思考)三、问题思考:一、static的用法:static可以用来修饰类的成员方法、类的成员变量、类中的内部类(以及用static修饰的内部类中的变量、方法、内部类),另外可以编写static代码块来优化程序性能。作用:方便在没有创建对象的情况下来进行调用(方法/变量)。被static关键字修饰的方法或者变量不需要依赖于对象来进行访问,只要类被加载了,就可以通过类名去进行访问。①修饰类的成员变量:static.

    2022年7月17日
    15
  • OAuth2.0 原理流程及其单点登录和权限控制

    点击上方“全栈程序员社区”,星标公众号 重磅干货,第一时间送达 作者:王克锋 kefeng.wang/2018/04/06/oauth2-sso 单点登录是多域名企业站点流行的登录…

    2021年6月28日
    92
  • 数仓(三):分层设计 ODS-DWD-DWS-ADS

    数仓(三):分层设计 ODS-DWD-DWS-ADS一、数仓建模的意义,为什么要对数据仓库分层?只有数据模型将数据有序的组织和存储起来之后,大数据才能得到高性能、低成本、高效率、高质量的使用。1、清晰数据结构:每一个数据分层都有它的作用域,这样我们在使用表的时候能更方便地定位和理解。数据关系条理化:源系统间存在复杂的数据关系,比如客户信息同时存在于核心系统、信贷系统、理财系统、资金系统,取数时该如何决策呢?数据仓库会对相同主题的数据进行统一建模,把复杂的数据关系梳理成条理清晰的数据模型,使用时就可避免上述问题了。2、数据血缘追…

    2022年6月26日
    31
  • ubuntu安装gcc和g++

    ubuntu安装gcc和g++依赖包含gcc和g++,只需一行命令即可sudoapt-getinstallbuild-essential查看版本g++–versiongcc–version

    2022年7月24日
    10

发表回复

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

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