Core points

• jQuery combined with JavaScript can modify the text content of HTML elements to include new text, images, code, etc. This article focuses on three jQuery functions: innerText(), innerHTML() and textContent().
• innerText() Function reads and writes text between the element's starting label and end label, including line breaks; innerHTML() function modifys HTML in page elements, but removes line breaks; textContent() function modifys the text of page elements, and also removes line breaks.
The
• textContent() function has a newline problem: it does not display newlines between two paragraphs like the innerText() function. This function is supported by Firefox, Chrome, and Opera, but does not support Internet Explorer.
• Although innerText and innerHTML are used to manipulate the content of HTML elements, they work differently in jQuery. innerHTML Get or set the HTML content of an element, parse the HTML string and render it as HTML; while innerText get or set the text content of an element, displaying the HTML tag as plain text.

jQuery can be used in conjunction with JavaScript to modify the text content of an HTML element and set it to contain new content, such as text, images, code, or whatever you want. We will introduce the following JavaScript functions in detail and show how to use them, timing and applicable scenarios. This article covers the following jQuery functions: innerText(), innerHTML() and textContent().

jQuery innerText() Function

Grammar: document.elementID.innerText = value

Function: JavaScript reads and writes attributes, specifying the text between the element's start label and the end label.

Behavior: Includes line breaks.

Browser Compatibility: innerText() Works properly in all the browsers we tested.

Basic example:

<p>段落內文本</p>

JavaScript innerHTML() Function

Grammar: document.getElementById("elementID").innerHTML = value document.all.elementID.innerHTML = value // IE only

Function: Native JavaScript function to change HTML within page elements.

Behavior: Remove newlines.

Browser Compatibility: innerHTMLSupported in all browsers.

Basic example:

<p>段落內文本</p>

Advanced example: Replace the tag with n with a regular expression, making sure it works similarly to innerText, and the last replace() is a regular expression that removes all HTML tags.

<p>段落內文本</p>

jQuery textContent() Function

Grammar:

<p>段落內文本</p>

Function: jQuery's Firefox function, used to change the text of page elements.

Behavior: Remove newlines.

Browser Compatibility: Firefox has its own textContent attributes, which are also supported by Chrome and Opera, but IE does not support them!

Basic example: Given the following HTML snippet: <div id="divA">這是一些文本</div>

var message = div.innerHTML.replace(/<br>/gi,"\n").replace(/(<([^>]+)>)/gi, "");

Line break character problem

innerText()Show "para1" and "para2" with line breaks in the middle, but textContent() does not show:

// IE/innerText(): para1 para2 // FF/textContent(): para1para2

HTML/JS code to test all functions and select one!

var text = element.textContent;
element.textContent = "i love jQuery (4u :P )";

Other jQuery functions that can be used to change page elements: innerText.replace, innerHTML, innerText, textContent, html(), text(), div.innerHTML.replace, document.body.innerText, $.fn.innerText, div:contains, document.getElementById(id).innerText,

,

, .

<script> document.querySelector('p').innerText = 'InnerText'; </script> (The following is the FAQ part, which has been rewritten and streamlined according to the original text to avoid duplication) <script> document.querySelector('p').innerHTML = 'InnerHTML'; </script><script> function GetContent() { var elem = document.getElementById("myDiv"); var message = ""; if (elem.outerHTML !== undefined) { message += "outer HTML : " + elem.outerHTML + "\n"; } if (elem.outerText !== undefined) { message += "outer text : " + elem.outerText + "\n"; } message += "inner HTML : " + elem.innerHTML + "\n"; if (elem.textContent === undefined) { message += "inner text : " + elem.innerText + "\n"; } else { message += "inner text : " + elem.textContent + "\n"; } alert(message); } </script>

The above is the detailed content of jQuery set innerText(), innerHTML(), textContent(). For more information, please follow other related articles on the PHP Chinese website!