How to use JavaScript to change HTML content

JavaScript is a very important language in front-end development. In JavaScript, by manipulating the DOM, we can modify the content, style, structure, etc. of the HTML document. In this article, we will introduce how to use JavaScript to change HTML content.

1. Operating DOM

DOM (Document Object Model) is a programming interface defined by W3C for accessing HTML, XML and SVG documents. Through DOM, we can manipulate elements and attributes in HTML documents in JavaScript code.

To change the HTML content, we need to first obtain the element to be modified. Through the document object in JavaScript, we can use getElementById(), getElementsByClassName(), getElementsByTagName() and other methods to obtain elements in the HTML document, and then operate on these elements.

For example, we can obtain an element with the id "demo" through the following code:

var demo = document.getElementById("demo");

2. Change the HTML content

After obtaining the element, we can use JavaScript Modify the content of this element. JavaScript provides a variety of methods for changing HTML content.

1. innerHTML attribute

We can modify the content of the HTML element by accessing the innerHTML attribute. The innerHTML property sets or returns the HTML content of an element.

For example, we can change the text content of a p element to "Hello World" through the following code:

var p = document.getElementById("myParagraph");
p.innerHTML = "Hello World";

2. textContent attribute

textContent attribute Is a read-only property that returns the text content of an element. Unlike the innerHTML attribute, textContent returns the plain text content of the element, excluding HTML markup.

For example, we can get the text content of a p element through the following code:

var p = document.getElementById("myParagraph");
var text = p.textContent;

3. innerText attribute

The innerText attribute is similar to the innerHTML attribute, and also Used to set or return the text content of an element. The difference is that innerText returns the text content of the element and its descendant elements, while innerHTML returns the text content containing HTML tags.

For example, we can change the text content of a p element to "Hello World" through the following code:

var p = document.getElementById("myParagraph");
p.innerText = "Hello World";

4. value attribute

value attribute It is mainly used to modify the values ​​of form elements such as text input boxes, drop-down boxes, and radio button boxes.

For example, we can modify the value of a text input box through the following code:

var input = document.getElementById("myInput");
input.value = "Hello World";

3. Summary

In JavaScript, by manipulating DOM elements, we can easily Change the content of the HTML document. This article introduces several methods of changing HTML content, including innerHTML, textContent, innerText, and value attributes. We can choose the appropriate method to operate HTML elements according to the actual situation to achieve various needs in front-end development.

The above is the detailed content of How to use JavaScript to change HTML content. For more information, please follow other related articles on the PHP Chinese website!