How does javascript modify html content

In this article, the editor introduces in detail "how javascript modifies html content". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "javascript how to modify html content" can help you solve your doubts.

Javascript modifies html content: 1, use innerHTML attribute to modify html content; 2, use innerText attribute to modify html content; 3, use uterText attribute to modify html content; 4, use outerHTML attribute to modify html content.

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

Method 1: use the innerHTML property to modify the html content

The innerHTML property sets or returns the HTML between the start and end tags of the table row.

Method 2: use the innerText property to modify the html content

InnerText inserts text content into the specified element, and if the text contains a HTML string, it is encoded and displayed.

Browser support status: IE 4 +, Safari 3 +, Chrome and Opera 8 +. Firefox provides the textContent attribute to support the same functionality. Other browsers that support the textContent attribute include IE 9 +, Safari 3 +, Opera 10 +, and Chrome.

Method 3: use the uterText property to modify the html content

OuterText is similar to innerText in function, but it can overwrite existing elements.

Method 4: use the outerHTML property to modify the html content

Example

The following example uses the four properties outerText, innerText, outerHTML, and innerHTML to insert text for different list items in the list structure.

Click to answer the question. Hello. What's your name? What is your occupation? Do you like JS? Ul = document.getElementsByTagName ("ul") [0]; / get the list structure var lis = ul.getElementsByTagName ("li"); / / get all the list items of the list structure lis [0] .onclick = function () {/ / bind the event handler function this.innerText = "Thank you" for the first list item / / replace text} lis [1] .onclick = function () {/ / bind the event handler function for the second list item is [XSS _ clean] = "my name" / / replace HTML text} lis [2] .onclick = function () {/ / bind the event handler function this.outerText for the third list item = "I am a student" / / overwrite the list item label and its contents} lis [3] .onclick = function () {/ / bind the event handler function this.outerHTML = "of course like" for the fourth list item; / / overwrite the list item label and its contents}

Output:

Read here, this "javascript how to modify html content" article has been introduced, want to master the knowledge of this article also need to practice and use to understand, if you want to know more about the article, welcome to follow the industry information channel.