Changing html element id dynamically using Javascript

Question

I manage do change the text in my button using Javascript.

Using this code

$("#unfriend").click(function(){
    $.post("/unfriend/<?= $friend_but->id ?>",
    function(data,status){
        //alert(data);
        if (data == 'ok') {
            alert(data);
            $('#unfriend').html('Add Friend');
        };
    });
});

But I have a problem, how can change the id #unfriend into #addfriend?

I added $('#unfriend').setAttribute('id','addfriend'); but it's not working. And When I also added that code, the text in my button is not changing.

hope you can use $("#unfriend" ).replaceWith( $( "#friend" ).html("your text") ); — Aru
– Aru, Commented Oct 24, 2014 at 12:55
I am doing this because I want to dynamically change the button text and Id. Say, if a user want to unfriend another user I want to make the button change its text into "Add friend" dynamically without reloading the page. Also with the id of the button since my js depends on which controller of my CodeIgniter needs to be use. — user3933400
– user3933400, Commented Oct 24, 2014 at 13:15

TheFrozenOne · Accepted Answer · 2014-10-24 12:55:47Z

2

Use jQuerys .attr() instead.

$('#unfriend').attr('id','addfriend');

Demo which works:

http://jsfiddle.net/r8vr6u49/

answered Oct 24, 2014 at 12:55

TheFrozenOne

1,7159 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peachyz · Accepted Answer · 2014-10-24 12:57:31Z

1

.attr('id','addfriend')

you cant use javascript setAttribute on jQuery object

edited Oct 24, 2014 at 12:57

answered Oct 24, 2014 at 12:55

Peachyz

1448 bronze badges

Comments

laaposto · Accepted Answer · 2014-10-24 12:57:02Z

0

$('#unfriend').attr('id','addfriend');

edited Oct 24, 2014 at 12:57

laaposto

12.2k15 gold badges60 silver badges73 bronze badges

answered Oct 24, 2014 at 12:55

Ryan Beaulieu

4534 silver badges15 bronze badges

4 Comments

dialogik Over a year ago

Adding a little supportive text will help understand your solution.

Ryan Beaulieu Over a year ago

I didnt bother adding a comment because 4 other people had posted the same answer. I usually add an answer and then edit with a more descriptive response but in this case with some many other responses it was useless

dialogik Over a year ago

Maybe that's why Doodlebunch gets the upvotes instead of your answer (although you postet first)...

Ryan Beaulieu Over a year ago

Does it matter? The user got their desired answer and result. I am not concerned with me upvotes or rank. I simply like to help where I can. Don't take things so seriously pal. Thanks.

Aru · Accepted Answer · 2014-10-24 12:57:53Z

0

HTML

<div id="friend">Hello</div>

Script

$('#friend').on('click', function() {
   $(this).attr('id', 'unfriend').html("text to be updated"); 
});

answered Oct 24, 2014 at 12:57

Aru

1,8701 gold badge13 silver badges15 bronze badges

Comments

dialogik · Accepted Answer · 2014-10-24 13:44:57Z

0

$('#unfriend').attr("id","newId");

This will change the id of div

to applay click event or any jquery event on dynamically changed div you have to use

$(document).on('event',id,function(){});

give the code inside function

edited Oct 24, 2014 at 13:44

dialogik

9,59218 gold badges79 silver badges122 bronze badges

answered Oct 24, 2014 at 13:23

Golwin Antony

12 bronze badges

Collectives™ on Stack Overflow

Changing html element id dynamically using Javascript

5 Answers 5

Comments

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related