Home Web Front-end JS Tutorial How to get tag content using JS

How to get tag content using JS

Jun 04, 2018 pm 06:00 PM
javascript content Label

This time I will show you how to use JS to obtain tag content, and what are the precautions for using JS to obtain tag content. The following is a practical case, let’s take a look.

In our daily JS programming, we often need to obtain the content of tags and operate on them. There are many details that are easily overlooked by us. Now I will briefly summarize it based on the methods I usually use. If there are any errors, please correct them.

The HTML structure is as follows:

<!DOCTYPE  html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> </head> <body> <p id="box">     <p>这有个     第一个p</p>     <p>这有个第二个p</p>     <span>这是个         span</span>     <br>     <a href="#">这有个a标签</a> </p>
</body> </html>
Copy after login

This method can get all the content in the tag, including tags, spaces, text, line breaks, etc.

Method 1, innerHTML

 <script>
     var box = document.getElementById(&#39;box&#39;);//    获取标签的内容
     var box1 = box.innerHTML;
     console.log(box1);</script>
Copy after login

The JS code and renderings are as follows:

innerHTML gets the content in the tag

If you want to clear the content of the tag, innerHTML = ""; that's it

If you want to set the content of the tag, innerHTML = "Fill in the tag and content you want to set"; when setting the content, All original content will be overwritten.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use filter globally

Detailed explanation of JS framework library use cases

The above is the detailed content of How to get tag content using JS. For more information, please follow other related articles on the PHP Chinese website!

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)
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
1 months 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)

How to change the Microsoft Edge browser to open with 360 navigation - How to change the opening with 360 navigation How to change the Microsoft Edge browser to open with 360 navigation - How to change the opening with 360 navigation Mar 04, 2024 pm 01:50 PM

How to change the page that opens the Microsoft Edge browser to 360 navigation? It is actually very simple, so now I will share with you the method of changing the page that opens the Microsoft Edge browser to 360 navigation. Friends in need can take a look. I hope Can help everyone. Open the Microsoft Edge browser. We see a page like the one below. Click the three-dot icon in the upper right corner. Click "Settings." Click "On startup" in the left column of the settings page. Click on the three points shown in the picture in the right column (do not click "Open New Tab"), then click Edit and change the URL to "0" (or other meaningless numbers). Then click "Save". Next, select "

How to search for text across all tabs in Chrome and Edge How to search for text across all tabs in Chrome and Edge Feb 19, 2024 am 11:30 AM

This tutorial shows you how to find specific text or phrases on all open tabs in Chrome or Edge on Windows. Is there a way to do a text search on all open tabs in Chrome? Yes, you can use a free external web extension in Chrome to perform text searches on all open tabs without having to switch tabs manually. Some extensions like TabSearch and Ctrl-FPlus can help you achieve this easily. How to search text across all tabs in Google Chrome? Ctrl-FPlus is a free extension that makes it easy for users to search for a specific word, phrase or text across all tabs of their browser window. This expansion

How to set up Cheat Engine in Chinese? Cheat Engine setting Chinese method How to set up Cheat Engine in Chinese? Cheat Engine setting Chinese method Mar 13, 2024 pm 04:49 PM

CheatEngine is a game editor that can edit and modify the game's memory. However, its default language is non-Chinese, which is inconvenient for many friends. So how to set Chinese in CheatEngine? Today, the editor will give you a detailed introduction to how to set up Chinese in CheatEngine. I hope it can help you. Setting method one: 1. Double-click to open the software and click "edit" in the upper left corner. 2. Then click “settings” in the option list below. 3. In the opened window interface, click "languages" in the left column

How to add tags on Douyin to attract traffic? Which tags on the platform are easiest to attract traffic to? How to add tags on Douyin to attract traffic? Which tags on the platform are easiest to attract traffic to? Mar 22, 2024 am 10:28 AM

As a popular short video social platform, Douyin has a huge user base. For Douyin creators, using tags to attract traffic is an effective way to increase the exposure of content and attract attention. So, how does Douyin use tags to attract traffic? This article will answer this question in detail for you and introduce related techniques. 1. How to add tags on Douyin to attract traffic? When posting a video, make sure to choose tags that are relevant to the content. These tags should cover the topic and keywords of your video to make it easier for users to find your video through tags. Leveraging popular hashtags is an effective way to increase your video’s exposure. Research current popular tags and trends and incorporate them into your video descriptions and tags. These popular tags usually have higher visibility and can attract the attention of more viewers. 3. Label

Where to set the download button in Microsoft Edge - How to set the download button in Microsoft Edge Where to set the download button in Microsoft Edge - How to set the download button in Microsoft Edge Mar 06, 2024 am 11:49 AM

Do you know where to set the download button to display in Microsoft Edge? Below, the editor will bring you the method to set the download button to display in Microsoft Edge. I hope it will be helpful to you. Let’s follow the editor to learn it! Step 1: First open Microsoft Edge Browser, click the [...] logo in the upper right corner, as shown in the figure below. Step 2: Then click [Settings] in the pop-up menu, as shown in the figure below. Step 3: Then click [Appearance] on the left side of the interface, as shown in the figure below. Step 4: Finally, click the button on the right side of [Show Download Button] and it will change from gray to blue, as shown in the figure below. The above is where the editor brings you how to set up the download button in Microsoft Edge.

What is the clock behind the TikTok label? How to tag Douyin account? What is the clock behind the TikTok label? How to tag Douyin account? Mar 24, 2024 pm 03:46 PM

When browsing Douyin works, we often see a clock icon behind the tag. So, what exactly is this clock? This article will focus on the discussion of &quot;What is the clock behind the Douyin label&quot;, hoping to provide some useful reference for your use of Douyin. 1. What is the clock behind the Douyin label? Douyin will launch some hot topic challenges. When users participate, they will see a clock icon after the tag, which means that the work is participating in the topic challenge and displays the remaining time of the challenge. For some time-sensitive content, such as holidays, special events, etc., Douyin will attach a clock icon after the label to remind users of the validity period of the content. 3. Popular tags: When a tag becomes popular, Douyin will add a clock icon after the tag to indicate that the tag is

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

A closer look at the video element in HTML A closer look at the video element in HTML Feb 24, 2024 pm 08:18 PM

Detailed explanation of the video tag in HTML The video tag in HTML5 is a tag used to play videos on web pages. It can render videos using different formats, such as MP4, WebM, Ogg, and more. In this article, we will introduce the use of video tag in detail and provide specific code examples. Basic Structure The following is the basic structure of the video tag:

See all articles