How to replace src attribute name with data attribute name

Question

I have a html document which uses object tag with src attribute. But I need to replace src(attribute name) with "data" (attribute name).

Is it possible to do so using JavaScript? All I referred shows that we can change the attribute values, but I couldnt find any method to replace attribute node name.

Could someone please help

Answer 1

You will have to get the src attribute value and set that to the data attribute value.

You can use .removeAttribute() if you want to get rid of the src attributes.

Something like this:

var att = element.getAttribute("src");
element.setAttribute("data", att);
element.removeAttribute("src");

jsFiddle example

If you want to do a bunch of elements, just select them and do a for loop. For example going over all divs:

var att, i, elie = document.getElementsByTagName("div");

for (i = 0; i < elie.length; ++i)
{
    att = elie[i].getAttribute("src");
    elie[i].setAttribute("data", att);
    elie[i].removeAttribute("src");        
}

jsFiddle example

---

.getAttribute()
.removeAttribute()
.setAttribute()

Answer 2

When you will be replacing the attribute?

Why dont you write entire thing using innerhtml.

the needed src and all inside div with an id.

just write html inside that div on submit or whenever yu want