search

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:3018806browse

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:

How to modify the content of html elements in js? HTML DOM implementation to modify content

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:

How to modify the content of html elements in js? HTML DOM implementation to modify content

##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 HTML

document.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:

How to modify the content of html elements in js? HTML DOM implementation to modify content##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

! Related recommendations:

Public PHP training video tutorial

JavaScript graphic tutorial


JavaScript Online Manual

The 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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Learn how to use noConflict() in jQueryNext article：Learn how to use noConflict() in jQuery

Related articles

See more