How to Replace the Entire HTML Node using JavaScript?

HTML content modification using JavaScript

Last Updated : 08 Jun, 2023

JavaScript is the dynamic, lightweight, and most common computer programming language used to create web pages. It interacts with client-side and makes dynamic pages. JavaScript Can Change the Content of an HTML page. The getElementById() method is used to get the id of the element and change the HTML content.

Example: In this example, we will change the content of the paragraph element.

html

<!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>
        Change HTML Content using JavaScript
    </title>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <h3>
        Change HTML Content using Javascript
    </h3>

    <p id="GFG">
        GeeksforGeeks: A computer science portal
    </p>

    <button type="button" onclick=
        'document.getElementById("GFG").innerHTML
            ="Welcome to GeeksforGeeks"'>
        Click Here!
    </button>
</body>
</html>

Output:

HTML content modification using Javascript — HTML content modification using JavaScript

JavaScript Can Change Styles of the HTML page: JavaScript can be used to change the CSS property of an HTML page.

Example: In this example, we will change the style of the paragraph element.

html

<!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>
        Change HTML Content using JavaScript
    </title>
</head>

<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>

    <h3>
        Change HTML Content using Javascript
    </h3>

    <p id="GFG">
        GeeksforGeeks: A computer science portal
    </p>

    <button type="button" 
        onclick="document.getElementById('GFG')
            .style.fontSize='25px'">
        Click Here!
    </button>
</body>
</html>

Output:

HTML content modification using Javascript — HTML content modification using JavaScript

JavaScript Can Hide or Show HTML Elements: JavaScript can be used to change the display property to hide or show element content. To understand this feature refer to this Hide or show elements in HTML using display property article

How to Replace the Entire HTML Node using JavaScript?

J

jeetesh16

Improve

Article Tags :

Similar Reads

How to remove an HTML element using JavaScript ?

Removing an HTML element using JavaScript involves deleting it from the DOM, typically using methods like element.remove() or parentNode.removeChild(). This approach updates the webpage dynamically, allowing for responsive interactions by removing unwanted or outdated elements based on user actions

Manipulating HTML Elements with JavaScript

JavaScript is a powerful language that can be used to manipulate the HTML elements on a web page. By using JavaScript, we can access the HTML elements and modify their attributes, styles, and content. This allows us to create dynamic and interactive web pages. Methods to Identify the elements to man

How to Replace the Entire HTML Node using JavaScript?

To replace an entire HTML node using JavaScript, you can use methods that allow you to remove an existing node and insert a new one in its place. Approach: Using replace() method Take the new document as a form of string(eg.. Str = '< html > < /html > '). Use .replace() method on the HTM

How to remove specific div element by using JavaScript?

Removing a specific `<div>` element with JavaScript is crucial for dynamic web content management. Whether updating information, responding to user actions, or optimizing performance by cleaning the DOM, efficient DOM manipulation is essential. JavaScript offers diverse methods such as `remove

Different ways to access HTML elements using JavaScript

Sometimes, users need to manipulate the HTML element without changing the code of the HTML. In this scenario, users can use JavaScript to change HTML elements without overwriting them. Before we move ahead to change the HTML element using JavaScript, users should learn to access it from the DOM (Doc

How to append HTML code to a div using JavaScript ?

Updating content on a webpage without reloading the entire page makes for a faster and smoother user experience. JavaScript allows you to do this by adding new HTML to elements like divs dynamically.There are four simple ways to add HTML to a div using JavaScript: Using the innerHTML Attribute Using

How to Change the ID of Element using JavaScript?

We are given an element and the task is to change the ID of elements using JavaScript. ID is unique for any element and it can be assigned to an element only once. JavaScript provides a method to access this id and also to manipulate the id. Syntax:Selected_element.id = newID;Below are the appraoche

How to use innerHTML in JavaScript ?

The innerHTML property in JavaScript allows you to get or set the HTML content of an element as a string. Syntax ForGetting HTML content of an element:let element = document.getElementById("myElementId"); let htmlContent = element.innerHTML;Setting HTML content of an element:let element = document.g

Remove & Add new HTML Tags using JavaScript

In web development, dynamically add or remove HTML tags using JavaScript. This can be useful for creating interactive user interfaces and updating content based on user actions. Below are the approaches to remove and add new HTML tags using JavaScript: Table of Content Using createElement and remove

How to Create an Image Element using JavaScript?

We will dynamically create an <img> element in HTML using JavaScript. When a button is clicked, we'll generate the <img> element and append it to the document.Using createElement() methodCreate an empty img element using document.createElement() method.Then set its attributes like (src,