I have a "home" button in the headers with this "standard" code at many places:

```
<a href="#home" 
    data-role="button" 
    data-iconpos="right"
    data-icon="home" 
   class="ui-btn-right">
   home</a>

```

**I want to render it from a single piece of javascript code since it appears many times in index.html** - to decrease code redundancy and for easier changes. (I want to use jQuery so the cross browser functionality is ok) 

The code bellow should :) work, what am I doing wrong ? 

(I tried to solve it from different angles, I can write out text, put out other html etc. - but I can not tackle data-\* and standard html attr together)

**THE CODE:**

*in index.html:*

```
<div  data-role="header">
    <a data-myButton="headerHome> </a>
</div>

```

*in main.js :*

```
$( function () {    
    // put home button into the headers:        
    $("a[data-mybutton = 'headerHome']").( function () {
        $(this).href = "#home";             
        $(this).data("role","button");
        $(this).data("iconpos","right");
        $(this).data("icon","home");
        $(this).class("ui-btn-right");      
    })
})

```

I call main.js as a last js file in my index.html