How to add attribute to HTML element using javascript

Question

Using javascript (preferably not jquery) I'm trying to change the line:

<input type="number" name="price" required="" id="id_price">

into

<input type="number" name="price" required="" id="id_price" step="any">

I know the solution's got to be easy but I just can't crack it. Help would be much appreciated!!

Are you trying to write a function that transforms HTML strings, or that modifies the DOM? — Chris Martin, Dec 14 '14 at 06:41

Sampath Liyanage · Accepted Answer · 2014-12-15T11:40:50.807

31

As torazaburo suggests in the comment you can do it in one step with setAttribute() method

document.getElementById("id_price").setAttribute("step","any");

<input type="number" name="price" required="" id="id_price">

OR

First create the attribute and set the value. Then add it to the element..

var attr = document.createAttribute('step');
attr.value="any";
document.getElementById("id_price").setAttributeNode(attr);

<input type="number" name="price" required="" id="id_price">

edited Dec 15 '14 at 11:40

answered Dec 14 '14 at 06:40

Sampath Liyanage

This is an unnecessarily wordy way to simply do `setAttribute`. – Dec 14 '14 at 07:54

1 Answers1