How to Change Website Content in JavaScript | Append Text in JavaScript 2022

How to change website content in JavaScript
How to change website content in JavaScript
Spread the love, Share this Article!

Subscribe to Our YouTube Channel!

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 2022. This JavaScript tutorial will teach you to hide show images using javascript, 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 to 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 to hide show images using javascript?
  • Hide and show div using javascript with 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 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.

How to Change Website Content in JavaScript

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

How to change website content in JavaScript HTML Code?
How to change website content in JavaScript HTML Code?
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.

How to hide show website content in JavaScript
How to hide show website content in JavaScript

Hit The Subscribe Button to Get Daily New video!

Spread the love, Share this Article!

Important Tags:

5 Responses

  1. My brother recommended I may like this blog. He used to be totally right. This post actually made my day. You cann’t believe just how a lot time I had spent for this info! Thanks!

  2. I must thank you for the efforts youve put in penning this site. I am hoping to check out the same high-grade blog posts by you in the future as well. In fact, your creative writing abilities has motivated me to get my very own blog now 😉

  3. Greate article. Keep writing such kind of info on your blog.
    Im really impressed by your site.
    Hello there, You have performed a fantastic job.
    I’ll definitely digg it and personally suggest to
    my friends. I’m sure they will be benefited from this web site.

Leave a Reply

Your email address will not be published.