JavaScript--change the value of HTML

To change the value of an HTML element, the following methods can be used:

1. Use the innerText property of the element node to change the text content of the element.
For example: element.innerText = 'new text content';

2. Use the innerHTML attribute of the element node to change the HTML content of the element.
For example: element.innerHTML = 'New HTML content';

3. Use the attribute of the element node to change the attribute value of the HTML element.
For example: element.attribute = 'new attribute value';

4. Use the setAttribute method of the element node to change the attribute value of the HTML element.
For example: element.setAttribute('attribute', 'new attribute value');

5. Use the style attribute of the element node to change the inline style value of the HTML element.
For example: element.style.style = 'new style value';

Note:

Attributes refer to the characteristics that describe the characteristics, properties or states of things. In computer science, attributes are often used to describe additional information about an object, element, or data. They provide more detailed information about objects and can be used to identify, classify, manipulate, and control the behavior of objects.

The specific meaning of an attribute may vary in different domains and programming languages. For example, in HTML, attributes are used to define the characteristics and behavior of HTML elements. Each HTML element can have a set of predefined attributes, such as id, class, src, etc., which are used to specify the element's unique identification, style, and other related information.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>使用JavaScript改变HTML元素的值</title>
</head>
<body>
    <h1 id="myHeading">原始标题</h1>
    <p id="myParagraph">原始段落</p>

    <script>
        // 使用元素节点的 innerText 属性来改变元素的文本内容
        var heading = document.getElementById('myHeading');
        heading.innerText = '新的标题';

        // 使用元素节点的 innerHTML 属性来改变元素的 HTML 内容
        var paragraph = document.getElementById('myParagraph');
        paragraph.innerHTML = '<strong>新的段落</strong>';

        // 使用元素节点的属性来改变 HTML 元素的属性值
        heading.id = 'newHeadingId';

        // 使用元素节点的 setAttribute 方法来改变 HTML 元素的属性值
        paragraph.setAttribute('class', 'highlight');

        // 使用元素节点的 style 属性来改变 HTML 元素的行内样式值
        paragraph.style.color = 'blue';
    </script>
</body>
</html>