How to Change the Id of a HTML Element with JavaScript

How to change id value using javascript?

you can access your button by the dom and then you can change it.

easily you can add an event listener on the button, then use the dom also. document.getElementById("myButton").addEventListener("click",
function(){ document.getElementById("order_total").id = "rsorder_total"; });

How to change a HTML element by id?

The issue is <label> does not have a value property. You have to either use textContent or innerHTML like:

document.getElementById("x1").textContent = x1;
document.getElementById("x2").textContent = x2;

Can I change the ID of an HTML element using Javascript?

The code you show does work; the problem is probably in the code which looks up and assigns obj. My guess is that this is just a javascript object, not a part of the DOM tree.

How to update id and name of html element inside div element?

Is that what you wants ? There was some typo errors when setting attr("name") and attr("id")

Also here's my code to get the insert works as much as you wants :

I clone the element in the click() event to make it works.

$(document).ready(function () {
//initialize the index with 1, the item with 0 index is already in webpage.
var i = 1;
$("#plus").on('click', function () {
//Add after the element which has class unique
var clone2 = $('#template').clone();
//Find name inside unique and update
$(clone2).find(".drop ").attr("name", "Course[" + i + "].Title ");
//Find id inside unique and update
$(clone2).find(".drop ").attr("id", "Course[" + i + "].Title ");
//Increment the index


See this fiddle

How to change the id of an element in html using javascript?

Your code throws error because you are trying to set hr2 and hr3 when they are not exist.
You need to set hr2 and hr3 variables after setting id's of them like below: = "hr2"; 
hr2= document.getElementById('hr2');

const text = document.querySelector('.text');
const hide = document.querySelector('.hide');
const one = document.querySelector('.one');
const two = document.querySelector('.two');
var hr1 = document.getElementById('hr1');
var hr2 = null;
var hr3 = null;
hr1.addEventListener('click', () => {
//one.classList.remove('hide'); = "hr2";
hr2= document.getElementById('hr2');
hr2.addEventListener('click', () => {
two.classList.remove('hide'); = "hr3";
hr3 = document.getElementById('hr3');

// I often get an error on hr2.addEventListener
    <div class="container">
<div class="text">
<div class="one hide">
<div class="two hide">
<div class="three hide">
<a href="#" class="button" id="hr1">clickme</a>

how Change the text of the inner html to that of the id

Something like this;

function change(divs){  divs.forEach((div) => {    if({      div.innerHTML =;    }  })}
let divs = document.querySelectorAll('div');change(divs);
<div></div><div id="special"></div><div></div><div></div>

Related Topics

Leave a reply