JavaScript Feb 22, 2023 Read : 519
How to change the ID of element using JavaScript

How to change the ID of element using JavaScript

Given an HTML document, the challenge is to use JavaScript to modify the element's ID. Below are two strategies that are covered:

Method 1: Using JavaScript, we may modify the ID by utilizing the id property.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AmarCode</title>
    <style>
        .div {
            height: 100px;
            width: 200px;
            margin: 0 auto;
            color: white;
        }

        #div1 {
            background: green;
        }

        #div2 {
            background: blue;
        }
    </style>
</head>
<body style="text-align:center;">

<h1 style="color:green;">
    Amar Code
</h1>

<p id="GFG_UP"></p>

<div class="div" id="div1"></div>
<br>

<button onClick="GFG_Fun()">
    click here
</button>

<script>
    var el_up = document.getElementById('GFG_UP');
    el_up.innerHTML = "Click on button to "
        + "change the ID of box.";

    function GFG_Fun() {
        document.getElementById('div1').id = 'div2';
    }
</script>
</body>
</html>

Method 2: Using JavaScript, we may modify the ID by using the id property located inside the element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AmarCode</title>
    <style>
        .div {
            height: 100px;
            width: 200px;
            margin: 0 auto;
            color: white;
        }

        #div1 {
            background: green;
        }

        #div2 {
            background: blue;
        }
    </style>
</head>
<body style="text-align:center;">

<h1 style="color:green;">
    AmarCode
</h1>

<p id="GFG_UP"></p>

<div class="div" id="div1"></div>
<br>

<button onclick="document.getElementById(
        'div1').id = 'div2'; return false">
    click here
</button>

<script>
    var el_up =
        document.getElementById('GFG_UP');

    el_up.innerHTML = "Click on button to"
        + " change the ID of box.";
</script>
</body>
</html>







Tag
JavaScript

Related Article

Featured Article

Categories

Tags