Home Web Front-end JS Tutorial innerText innerHTML usage and precautions [Recommended]_javascript skills

innerText innerHTML usage and precautions [Recommended]_javascript skills

May 16, 2016 pm 06:52 PM
Precautions

1: Dynamically change text and Html


[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute it
]

The innerText attribute is used to define the object The text to be output, in this example, innerText changes the text "How are you?" in the object DT into "I'm fine!" (statement DT.innerText="I'm fine!"). The innerHTML attribute is used to change the object DH. In addition to the function of innerText, it can also change the HTML statement inside the object DH, so it changes the text to "My last name is Xiao!" and the text output is changed to italics. () and add a straight line below (), that is, the statement DH.innerHTML="My last name is Xiao!". outerText and outerHTML also have similar functions, readers may wish to try them themselves.
2: Dynamic input and output of text

[Ctrl A Select all Note:
If you need to introduce external Js, you need to refresh to execute
]
The effect of this example is to first Enter text in the text box, and then press the "Output Text" button, and then the web page will automatically output the text you entered
Three: Note that innerHTML has an automatic syntax check function, which will automatically The HTML code is completely completed, which can be said to be magical
, for example, the following script
[Ctrl A Select all Note:
If you need to introduce external Js, you need to refresh to execute
]

The effect of running is like this of:innerText innerHTML usage and precautions [Recommended]_javascript skills

As shown in the picture:

So please Be careful when using it. For example, an error will occur when doing such an operation. Copy the code

The code is as follows:

list.innerHTML=""; list.innerHTML="
"
An intermediate variable must be used
Html code
Copy code The code is as follows:

var html="";
html ="
";
list.innerHTML=html;
var html="html ="
";
list.innerHTML=html;

This way the problem can be solved.
Also:
innerText in It is not supported under Firefox. Some people do this on the Internet
innerHTML is an attribute that complies with W3C standards, and innerText is only applicable to IE browsers. Therefore, use innerHTML as much as possible and less innerText. If To output content without HTML tags, you can use innerHTML to obtain the content containing HTML tags, and then use regular expressions to remove the HTML tags. Here is a simple example that complies with W3C standards:
No HTML, compliant with W3C standards
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Introduction to matters needing attention during the Mingchao test Introduction to matters needing attention during the Mingchao test Mar 13, 2024 pm 08:13 PM

During the Mingchao test, please avoid system upgrades, factory resets, and parts replacement to prevent information loss and abnormal game login. Special reminder: There is no appeal channel during the testing period, so please handle it with caution. Introduction to matters needing attention during the Mingchao test: Do not upgrade the system, restore factory settings, replace equipment components, etc. Notes: 1. Please upgrade the system carefully during the test period to avoid information loss. 2. If the system is updated, it may cause the problem of being unable to log in to the game. 3. At this stage, the appeal channel has not yet been opened. Players are advised to choose whether to upgrade at their own discretion. 4. At the same time, one game account can only be used with one Android device and one PC. 5. It is recommended that you wait until the test is completed before upgrading the mobile phone system or restoring factory settings or replacing the device.

C++ Development Notes: Avoid Null Pointer Exceptions in C++ Code C++ Development Notes: Avoid Null Pointer Exceptions in C++ Code Nov 22, 2023 pm 02:38 PM

In C++ development, null pointer exception is a common error, which often occurs when the pointer is not initialized or is continued to be used after being released. Null pointer exceptions not only cause program crashes, but may also cause security vulnerabilities, so special attention is required. This article will explain how to avoid null pointer exceptions in C++ code. Initializing pointer variables Pointers in C++ must be initialized before use. If not initialized, the pointer will point to a random memory address, which may cause a Null Pointer Exception. To initialize a pointer, point it to an

How to start a live broadcast on Douyin for the first time? What should you pay attention to when broadcasting live for the first time? How to start a live broadcast on Douyin for the first time? What should you pay attention to when broadcasting live for the first time? Mar 22, 2024 pm 04:10 PM

With the rise of short video platforms, Douyin has become an indispensable part of many people's daily lives. Live broadcasting on Douyin and interacting with fans are the dreams of many users. So, how do you start a live broadcast on Douyin for the first time? 1. How to start a live broadcast on Douyin for the first time? 1. Preparation To start live broadcast, you first need to ensure that your Douyin account has completed real-name authentication. You can find the real-name authentication tutorial in "Me" -> "Settings" -> "Account and Security" in the Douyin APP. After completing the real-name authentication, you can meet the live broadcast conditions and start live broadcast on the Douyin platform. 2. Apply for live broadcast permission. After meeting the live broadcast conditions, you need to apply for live broadcast permission. Open Douyin APP, click "Me"->"Creator Center"->"Direct

Steps and precautions for installing pip without network Steps and precautions for installing pip without network Jan 18, 2024 am 10:02 AM

Methods and precautions for installing pip in an offline environment. Installing pip becomes a challenge in an offline environment where the network is not smooth. In this article, we will introduce several methods of installing pip in an offline environment and provide specific code examples. Method 1: Use the offline installation package. In an environment that can connect to the Internet, use the following command to download the pip installation package from the official source: pipdownloadpip This command will automatically download pip and its dependent packages from the official source and save it in the current directory. Move the downloaded compressed package to a remote location

Steps and precautions for using localstorage to store data Steps and precautions for using localstorage to store data Jan 11, 2024 pm 04:51 PM

Steps and precautions for using localStorage to store data This article mainly introduces how to use localStorage to store data and provides relevant code examples. LocalStorage is a way of storing data in the browser that keeps the data local to the user's computer without going through a server. The following are the steps and things to pay attention to when using localStorage to store data. Step 1: Check whether the browser supports LocalStorage

Python Development Notes: Avoid Common Memory Leak Problems Python Development Notes: Avoid Common Memory Leak Problems Nov 22, 2023 pm 01:43 PM

As a high-level programming language, Python is becoming more and more popular among developers due to its advantages of being easy to learn, easy to use, and highly efficient in development. However, due to the way its garbage collection mechanism is implemented, Python is prone to memory leaks when dealing with large amounts of memory. This article will introduce the things you need to pay attention to during Python development from three aspects: common memory leak problems, causes of problems, and methods to avoid memory leaks. 1. Common memory leak problems: Memory leaks refer to the inability to release the memory space allocated by the program during operation.

Frequently Asked Questions and Notes: Using MyBatis for Batch Query Frequently Asked Questions and Notes: Using MyBatis for Batch Query Feb 19, 2024 pm 12:30 PM

Notes and FAQs on MyBatis batch query statements Introduction MyBatis is an excellent persistence layer framework that supports flexible and efficient database operations. Among them, batch query is a common requirement. By querying multiple pieces of data at one time, the overhead of database connection and SQL execution can be reduced, and the performance of the system can be improved. This article will introduce some precautions and common problems with MyBatis batch query statements, and provide specific code examples. Hope this can provide some help to developers. Things to note when using M

Things to note when using variable function parameters in Golang functions Things to note when using variable function parameters in Golang functions May 17, 2023 pm 06:01 PM

Golang is a strongly typed, static programming language with flexible function design. Variable function parameters are also one of the common implementation methods. It is usually used in scenarios where the number of function parameters is uncertain or dynamic parameter transfer is required. Although the use of variable function parameters is convenient and effective, there are also some issues that require attention. This article will introduce in detail the precautions for using variable function parameters. 1. What are variable function parameters? In Golang, if we need to define a function but cannot determine the number of parameters of the function, then

See all articles