How to Change Website Content Using JavaScript?
In this article, I will show you how to change the website content with JavaScript and How to Append Text in JavaScript in 2023. This JavaScript tutorial will teach you to hide and show images using javascript, and the basic concepts of how to make an interactive website using javascript.
You will also learn how to append or add text before and after an existing paragraph on a button click. you will learn how to change HTML content with javascript on button click and how to hide/show an image using the javascript onclick button.
JavaScript is a very powerful language widely used to make a user interactive dynamic website. You can replace or change the content of an HTML div element when the user clicks on a button.
Important Search Terms:
- How do hide and show images using javascript?
- Hide and show div using javascript with an example
- How do I change everything on my website using JavaScript code?
- Does JavaScript change content?
- How do I change the script on my website?
- document.body.contenteditable = true; void 0;
- javascript:document body contenteditable true
- How do I change the content of a website using JavaScript?
- javascript change text on the page
Video Tutorial:
Here is the complete video tutorial to understand the basic concepts of JavaScript programming for every web developer. This tutorial will teach you how to modify the website content and how to append or add text to an HTML web page.
Recommended for You!
- 10 Easy HTML CSS Projects for Beginners with Source Codes
- How to Run PHP Code in VSCode Terminal Console
- How to Receive Email from HTML Form using PHP
How to change paragraph text in JavaScript?
In this section, you will learn how a user can change the paragraph text with a new text on a button click in JavaScript. Following is the simple HTML code. In the following code, we have created three separate HTML paragraph elements with a button for each paragraph.
Next, we also included some CSS code in it to style buttons and other HTML elements. The 3rd <p> tag is an empty paragraph in which an image will be displayed on a button click.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
text-align: center;
font-size: 30px;
}
button {
width: 120px;
font-size: 16px;
padding: 10px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<!-- change paragraph text -->
<p id="text"> Hello World....!</p>
<button id="myButton">Change Text</button>
<!-- Add/append text to a paragraph -->
<p id="text2"> I am a web developer and I love ...</p>
<button id="appendBtn">Append Text</button>
<!-- Show/hide image on button click -->
<p id="emptyDiv"></p>
<button id="imageBtn">Show Image</button>
<script src="change.js"></script>
</body>
</html>
OutPut
After execution of the above HTML code, the following output will be displayed on a web browser.
JavaScript Cpde
Now in this section, we will learn JavaScript code. We have used the JavaScript innerHTML property to modify, change and append the text on the HTML web page.
The first section of javascript code will replace the whole text of the paragraph on a button click. The section of the JS code will append some text before and after in a paragraph on a button click.
The third section of the code will hide/show an HTML image element when the user clicks on the button. Also, change the button text from ‘Show Image’ to ‘Hide Image’ after the button is clicked.
/* Section 1: Changing paragraph text in JavaScript */
document.getElementById("myButton").onclick = function() {
document.getElementById("text").innerHTML = "<b>This ia a Changed Text!<b/>";
}
/* Section 2: Add/append text to a paragraph in JavaScript */
document.getElementById("appendBtn").onclick = function() {
var appendText = document.getElementById("text2");
appendText.innerHTML = "<b>I think</b>" + appendText.innerHTML + "<b> JavaScript </b>";
}
/* Section 3: show/hide image on button click */
document.getElementById("imageBtn").onclick = function () {
var showImage = document.getElementById("emptyDiv");
if(showImage.innerHTML == "") {
showImage.innerHTML = '<img src="image.jpg" width="300px" height="200px">';
document.getElementById("imageBtn").innerHTML = "Hide Image";
} else {
showImage.innerHTML = "";
document.getElementById("imageBtn").innerHTML = "Show Image";
}
}
Final Output
Finally, the following output will be displayed after running the JavaScript code in a code editor.
One Response
I agree with your point of view, your article has given me a lot of help and benefited me a lot. Thanks. Hope you continue to write such excellent articles.