How to use innerHTML in JavaScript-JS Tutorial-php.cn

How to use innerHTML in JavaScript

不言

Release： 2018-12-26 16:12:05

Original

37403 people have browsed it

The innerHTML attribute allows you to change the content of the html element. You can set or return the HTML between the start and end tags of the table row. This article will introduce you to the usage of innerHTML. Let’s go See the specific content.

How to use innerHTML in How to use innerHTML in How to use innerHTML in JavaScript

How to write innerHTML

For element, set the element name specified by innerHTML.

element.innerHTML;

Copy after login

Assign the html code of the specified element to the variable

By writing as follows, we assign the html code of the specified element to the variable sample1

var sample1 = element.innerHTML;

Copy after login

Replace the value of the variable with the specified element

Writing as follows, you can display the content of the variable sample2 on the element element after deleting the content of the element element.

element.innerHTML = sample2;

Copy after login

Clear the specified element

You can clear the content of the element element by specifying "".

element.innerHTML = “”;

Copy after login

Let’s look at the specific examples of innerHTML usage

The basic code is as follows

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
<div id="txt">
      <div id="txt1">文字内容1 </div>
      <span id="txt2">文字内容2 </span>
    </div>
    <p>---------------------</p>
    <div id="innerHTMLtxt"></div>
</body>
</html>

Copy after login

The running results are as follows

How to use innerHTML in How to use innerHTML in How to use innerHTML in JavaScript

Let’s look at the results of using the innerHTML attribute

<script type="text/javascript">
		innerHTMLtxt.innerHTML="php中文网！";
	</script>

Copy after login

##The running results are as follows

How to use innerHTML in How to use innerHTML in How to use innerHTML in JavaScript

Then let’s look at the code that uses innerHTML to clear elements

<script>
  txt.innerHTML="";
</script>

Copy after login

The running results are as follows

How to use innerHTML in JavaScript

This article ends here, more For exciting content, you can pay attention to the relevant columns of php Chinese website! ! !

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