I have a button class which I am using for twitter popover, my code is as follow:

<button class="btn btn-success" id="chaticon" data-original-title="Users Online" data-content="&lt;a href='#'&gt; OMGTEST &lt;/a&gt;">

And what I want to do is to modify the data-content via javascript,

Naively I tried to do:

document.getElementById("chaticon").data-content = "new content";

and it didn't work, any ideas on how I can do this?

I have a button class which I am using for twitter popover, my code is as follow:

<button class="btn btn-success" id="chaticon" data-original-title="Users Online" data-content="&lt;a href='#'&gt; OMGTEST &lt;/a&gt;">

And what I want to do is to modify the data-content via javascript,

Naively I tried to do:

document.getElementById("chaticon").data-content = "new content";

and it didn't work, any ideas on how I can do this?

• javascript
• button

2 Answers 2

Use the built in accessors for HTMLElement.

getAttribute(attributeName)
setAttribute(attributeName,newValue);

like this:

var yourElement = document.getElementById("chaticon");
var dataVal = yourElement.getAttribute("data-content");
var newData = "new data";
yourElement.setAttribute("data-content",newData);

here is a simple demo: http://jsfiddle/hpfk3/

edit

You should probably have included jquery and popover in the question instead of just asking about a button element. Since these are available, you can change the content like this:

//store chat icon jQuery object
var chatIcon = $("#chaticon");

//change data attribute on element
//change jquery data object content
//call setcontent method
chatIcon.attr("data-content","new data").data('popover').setContent();

//target the popover element and restore its placement definition
chatIcon.data('popover').$tip.addClass(chatIcon.data('popover').options.placement);

Try setting the attribute

document.getElementById("chaticon").setAttribute('data-content','new content');