outerHTML和innerHTML的区别

野性酷女 2023-03-03 15:28 6阅读 0赞

## 假设html为 ##

<div class="div1">
    		<div class="circle">
    			<img src="http://localhost:8080/static/image/yu@2x.png" alt="">
    		</div>
    	</div>

## 首先是outerHTML ##

### 读 > 返回连带自身的代码块 ###

let div = document.getElementsByClassName("div1")[0]
    // 读
    console.log(div.outerHTML)

### 结果为 ###

<div class="div1">
    		<div class="circle">
    			<img src="http://localhost:8080/static/image/yu@2x.png" alt="">
    		</div>
    	</div>

### 写 >将自身替换成你要插入的代码 ###

let div = document.getElementsByClassName("div1")[0]
    // 写
    div.outerHTML = "<h1>大家好</h1>"

### 结果为 整个div1 都没有了 , 变成了 `<h1>大家好</h1>` ###

<h1>大家好</h1>

## 然后是InnerHTML ##

### 读 > 返回自身的子元素 ###

let div = document.getElementsByClassName("div1")[0]
    // 读
    console.log(div.innerHTML)

### 结果为 ###

<div class="circle">
    			<img src="http://localhost:8080/static/image/yu@2x.png" alt="">
    		</div>

### 写 >将子元素替换插入的元素 ###

let div = document.getElementsByClassName("div1")[0]
    // 写
    div.innerHTML= "<h1>大家好</h1>"

### 子元素 , 变成了 ###

<div class="div1">
    	<h2>大家好</h2>
    </div>

#### 如果要报留原来的子元素 可以用 ####

div.innerHTML += "<h2>大家好<h2>"

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关 outerHTML和innerHTML的区别

假设html为 <div class="div1"> <div class="circle"> <img src="http://loc

野性酷女/ 2023年03月03日 15:28/ 0 赞/ 7 阅读

相关 2020 html()和innerHTML使用区别

html()和innerHTML使用区别一、html() html() 方法设置或返回被选元素的内容。当该方法用于返回内容时，则返回第一个匹配元素的内容。当该

Dear 丶/ 2022年12月20日 06:12/ 0 赞/ 145 阅读

相关 appendChild和innerHTML的小区别

appendChild接收的类型是一个对象， innerHTML接收的是一个字符串。一般在js里，拼接html标签时，使用字符串比如：`var html+='<div>

亦凉/ 2022年10月05日 09:52/ 0 赞/ 174 阅读

相关 innerHTML、innerText和outerHTML、outerText的区别

1、区别描述如下： innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 inn

布满荆棘的人生/ 2022年07月28日 10:49/ 0 赞/ 180 阅读

相关 javaScript中outerHTML,innerHTML,innerText,outerText的区别

使用innerHTML的时候将找着元素的内容（不包含元素本身）使用outerHTML的时候将找着元素的内容（包含元素本身） innerText,outerTex

深碍√TFBOYSˉ_/ 2022年07月17日 01:39/ 0 赞/ 208 阅读

相关 innerHTML和innertext的区别

innerHTML和innertext的区别很容易区分，那什么时候用innerHTML，innertext呢。 innerHTML获取的是标签的内容。而innertext获取

柔光的暖阳◎/ 2022年06月07日 02:12/ 0 赞/ 420 阅读

相关 document.write和innerHtml的区别

document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重

左手的ㄟ右手/ 2022年06月06日 07:07/ 0 赞/ 198 阅读

相关 JavaScript中innerText和innerHTML的区别

　　innerText返回或者设置DOM元素的文本　　innerHTML返回或者设置DOM元素的子元素　　1，返回值的区别　　 <div id="d

Bertha 。/ 2022年06月05日 06:39/ 0 赞/ 225 阅读

相关 innerHTML和outerHTML区别

1.innerHTML <body> <p>你好</p> <div id="test"><h5>就是喜欢你</h5></div>

╰半橙微兮°/ 2022年05月12日 09:14/ 0 赞/ 164 阅读

相关 innerHTML和innerText的区别

innerHTML 获得：得到元素内部所有标签的内容和标签设置：内容中包含了标签，标签是起作用 innerText 获得：得到元素内部的文本，没有标签

末蓝、/ 2022年02月23日 08:48/ 0 赞/ 218 阅读