July 21, 2020

How to Replace Content in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to replace content in javascript. The content can be in the form of plain text or HTML. For instance, a div can have other elements as its child and a paragraph element can have only text.

Most of the elements have innerText and innerHTML properties. The innerText property is best suited in case you want to replace text content of an element such as paragraph element. On the other hand, the innerHTML property is best suited when you want to replace HTML content of an element such as div element. We are going to see both of them in action.

In the following example, we have 2 buttons, one to replace text content and another to replace HTML content. Please have a look over the code example and steps given below.

HTML & CSS

We have a few elements in the HTML file (div, button, and p).

The first div element with a class of container is just a wrapper for the rest of the elements.
The first button element has “Text” and the second button element has “HTML” as inner text. Both of them are wrapped with a div element.
We have another div element with a class of content and it has a paragraph element as its child.

We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  
  <div class="container">
    <div>
      <button id="btnText">Text</button>
      <button id="btnHtml">HTML</button>
    </div>

    <div id="content">
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur, odio pariatur quam nostrum eos deleniti maiores rerum neque obcaecati similique est quae illo nihil fugiat enim eligendi ullam possimus labore?</p>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

.container,#content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#content {
    padding: 10px;
    margin-top: 10px;
    border: 1px solid black;
    width: 50%;
    min-height: 100px;
}

button {
    padding: 10px 20px;
    margin: 5px;
    outline: none;}

Javascript

We have selected both the button elements and content div element by id and paragraph element by tag name using the document.querySelector() method and stored them in btnText, btnHtml, content, and paragraph variables respectively.
We have attached the click event listener to both the button elements.
Inside the event handler function of the first button btnText, we are changing the text content of the paragraph element using the innerText property.

Inside the event handler function of the second button btnHtml, we are changing the HTML content of the div element using the innerHTML property.

let btnText = document.querySelector('#btnText');
let btnHtml = document.querySelector('#btnHtml');
let content = document.querySelector('#content');
let paragraph = document.querySelector('p');

btnText.addEventListener('click', () => {
    paragraph.innerText = 'Hello World';
});

btnHtml.addEventListener('click', () => {
    content.innerHTML = '<h1>Hello World</h1>';
});

You May Also Like: