Home >Web Front-end >JS Tutorial >How to modify html using javascript
How to modify HTML using JavaScript: 1. Use [document.write()] to directly write content to the HTML output stream; 2. Use the innerHTML attribute to change the HTML content; 3. Change the HTML attributes.
The operating environment of this tutorial: Windows 7 system, JavaScript version 1.8.5, DELL G3 computer.
Javascript method to modify html:
Change the HTML output stream:
In JavaScript, document.write() Can be used to write content directly to the HTML output stream
<!DOCTYPE html> <html> <body> <script> document.write(Date()); </script> </body> </html>
Do not use document.writr() after the document is loaded. This will overwrite the document.
Change HTML content
The easiest way to modify HTML content is to use the innerHTML attribute
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>Change HTML attribute
This example changes the src attribute of the a1f02c36ba31691bcfe87b2722de723b element
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>Related free learning recommendations: javascript video tutorial
The above is the detailed content of How to modify html using javascript. For more information, please follow other related articles on the PHP Chinese website!