innerText 与 innerHTML

2024 年 8 月 30 日 | 阅读 2 分钟

innerText 和 innerHTML 都是 JavaScript 的属性。

innerText

innerText 用于打印标签之间的纯文本信息，需要一些布局系统信息。它也会忽略空格。

语法

编码

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        JavaTpoint InnerText Code using Javascript
    </title> 
</head> 
  	
<body style="text-align:center;"> 
    
  <h1 style="color:red">JavaTpoint InnerText Code using Javascript</h1> 
<!-- JavaTpoint innerText code start from here, Here from you can take any element according to your choice. -->
    <div id="tpoint"> 
        The following element contains some 
        <codes>codes like welcome to javatpoint</codes> and 
        <italic>some text like my javascript code</italic>. 
    </div> 
    <p></p> 
    <button onClick="innerTextFunction()"> 
        innerText 
    </button> 
    <p id="op"></p> 
    <script> 
        function innerTextFunction() { 
            var x = document.getElementById('tpoint'); 
            alert(x.innerText); 
        } 
  
        
    </script> 
	
</body> 
  
</html>

innerHTML

innerHTML 用于打印标签之间的内容，包括文本信息。跨站安全攻击是 innerHTML 的主要缺点。

语法

编码

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        JavaTpoint InnerHTML Code using Javascript
    </title> 
</head> 
  	
<body style="text-align:center;"> 
    
  <h1 style="color:red">JavaTpoint InnerHTML Code using Javascript</h1> 
<!-- JavaTpoint innerHTML code start from here, Here from you can take any element according to your choice. -->
  
    <div id="tpoint"> 
        The following element contains some 
        <codes>codes like welcome to javatpoint</codes> and 
        <italic>some text like my javascript code</italic>. 
    </div> 
    <p></p> 
    <button onClick="innerHTMLFunction()"> 
        innerHTML 
    </button> 
<!--  innerHTML code end from here -->    
    <p id="op"></p> 
 
    <script> 
        function innerHTMLFunction() { 
            var x = document.getElementById('tpoint'); 
            alert(x.innerHTML); 
        } 
  
        
    </script> 
</body> 
  
</html>

innerText 和 innerHTML 之间的区别

下表显示了 innerText 和 innerHTML 之间的区别 -

innerText	innerHTML
以纯文本形式检索和设置内容。	以 HTML 格式检索和设置内容。
我们无法插入 HTML 标签。	我们可以插入 HTML 标签。
它会忽略空格。	它会考虑空格。
返回不包含内部元素标签的文本。	返回包含内部元素标签的标签。

下一主题区别

innerText 与 innerHTML

innerText

innerHTML

innerText 和 innerHTML 之间的区别

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

L-差异

Z-差异

Y-差异

X-差异

W-差异

V-差异

U-差异

T-差异

S-差异

R-差异

Q-差异

P-差异

O-差异

N-差异

M-差异

差异

K-差异

J-差异

I-差异

H-差异

G-差异

F-差异

E-差异

D-差异

C-差异

B-差异

A-差异

杂项-差异

最新更新-差异

innerText 与 innerHTML

innerText

innerHTML

innerText 和 innerHTML 之间的区别

相关帖子

独立日与国庆日

insmod 与 modprobe 的区别

本征半导体与外延半导体的区别

印度与迪拜的时差

行内块与块元素

体内受精与体外受精的区别

习语与谚语

赔偿与保证

吸气与呼气

投资与交易

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器