change html attribute with javascript

Question

I have the following code.

<li class="source" data-toggle="tooltip" data-placement="top" id="content1" title="" data-original-title="Test">Test Server 1</li>

I'm trying to change the content of data-original-title using the following code:

document.getElementById('content1').style["data-original-title"] = 'Online';

Am I doing something wrong?

Oleksandr T. · Accepted Answer · 2015-11-09 19:20:53Z

5

You can use .dataset

document.getElementById('content1').dataset.originalTitle = 'Online';

<li class="source" data-toggle="tooltip" data-placement="top" id="content1" title="" data-original-title="Test">Test Server 1</li>

or .setAttribute

document.getElementById('content1').setAttribute('data-original-title', 'Online');

<li class="source" data-toggle="tooltip" data-placement="top" id="content1" title="" data-original-title="Test">Test Server 1</li>

edited Nov 9, 2015 at 19:20

answered Nov 9, 2015 at 19:18

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

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

1 Comment

ajm Over a year ago

Nice use of dataset!

Musa · Accepted Answer · 2015-11-09 19:52:19Z

1

data-original-title is an attribute, so you would need to set it as such:

document.getElementById('content1').setAttribute('data-original-title','Online');

edited Nov 9, 2015 at 19:52

Musa

97.9k17 gold badges123 silver badges144 bronze badges

answered Nov 9, 2015 at 19:18

ajm

20.2k3 gold badges34 silver badges38 bronze badges

Comments

Musa · Accepted Answer · 2015-11-09 19:52:38Z

1

use setAttribtute()

document.getElementById("content1").setAttribute("data-original-title", "Online");

edited Nov 9, 2015 at 19:52

Musa

97.9k17 gold badges123 silver badges144 bronze badges

answered Nov 9, 2015 at 19:18

Jayaram

6,62612 gold badges47 silver badges85 bronze badges

Comments

edonbajrami · Accepted Answer · 2015-11-09 19:19:56Z

0

Try this one:

document.getElementById('content1').dataset.originalTitle = 'Online';

<li class="source" data-toggle="tooltip" data-placement="top" id="content1" title="" data-original-title="Test">Test Server 1</li>

answered Nov 9, 2015 at 19:19

edonbajrami

2,21625 silver badges35 bronze badges

Comments

Martin Slezák · Accepted Answer · 2015-11-09 19:18:45Z

-1

This does not seem to be a style, try this:

document.getElementById('content1').data-original-title = 'Online';

answered Nov 9, 2015 at 19:18

Martin Slezák

1812 silver badges12 bronze badges

2 Comments

Spencer Wieczorek Over a year ago

I'm really doubting JavaScript will correct parse the -, and will rather try to read them as a subtraction.

Martin Slezák Over a year ago

You are right, better to use setAttribute() method.

Collectives™ on Stack Overflow

change html attribute with javascript

5 Answers 5

1 Comment

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related