Home > Article > Web Front-end > How to modify the content of html elements in js? HTML DOM implementation to modify content
How to modify the content of html elements in js? HTML DOM implementation to modify content
- 青灯夜游Original
- 2018-10-09 09:54:3018727browse
How to modify the content of html elements in js? This chapter will introduce to you how to use HTML DOM to modify the content of html elements in js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
First we need to understandWhat is HTML DOM? What is the role of HTML DOM?
HTML DOM, short for Document Object Model, when a web page is loaded, the browser will create the document object model of the page.
The HTML DOM model can be constructed as a tree of objects. As shown below:
Through HTML DOM, all elements in the JavaScript HTML document can be accessed, and sufficient capabilities can be obtained to create dynamic HTML. Through HTML DOM, JavaScript can achieve the following functions:
js can modify all HTML elements in the page;
js can modify all HTML attributes in the page;
js can modify all CSS styles in the page;
js can react to all events in the page.
Let’s introduce in detail how js modifies the content of html elements through HTML DOM:
1. js modifies and adds html content
js can create and add dynamic HTML content. Use the write() method to write HTML expressions or JavaScript code directly to HTML documents.
Multiple parameters (exp1, exp2, exp3,...) can be listed in the write() method, and they will be appended to the document in order.
Syntax:
document.write(exp1,exp2,exp3,....)
Description:
Although according to the DOM standard, the write() method only accepts a single string as a parameter. However, write() can accept any number of parameters.
We usually use the write() method in the following two ways:
1. When using this method to output HTML in the document
2. When calling this method Create a new document in a window or frame other than the window. Note: In this method, be sure to use the close() method to close the document.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
document.write("<p>Hello World!</p> ","现在是：",Date());
</script>
</head>
</html>Rendering:
##2. js modify and replace the content of html element
The simplest and most direct way for js to modify and replace the content of html elements is to use the innerHTML attribute. Syntax:document.getElementById(id).innerHTML=new HTMLdocument.getElementById(id) is to find and obtain the HTML element that needs to be modified and replaced by id, and then use the innerHTML attribute to modify the content of the replaced html element. Example (changed the content of the
element):
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>
<p>"Old Header" 已被修改为 "New Header"。</p>
</body>
</html>Rendering:
##Description:
The HTML document in the example contains the
element with id="header";
We use HTML DOM to find and obtain the
element with id="header";
You can use the innerHTML attribute to replace all the content in the html element
.
Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit
JavaScript Video Tutorial Public PHP training video tutorialJavaScript graphic tutorialJavaScript Online ManualThe above is the detailed content of How to modify the content of html elements in js? HTML DOM implementation to modify content. For more information, please follow other related articles on the PHP Chinese website!