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
– Chris Martin, Commented Dec 14, 2014 at 6:41

Sampath Liyanage · Accepted Answer · 2014-12-15 11:40:50Z

34

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">

answered Dec 14, 2014 at 6:40

Sampath Liyanage

4,8962 gold badges32 silver badges42 bronze badges

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

1 Comment

This is an unnecessarily wordy way to simply do setAttribute.