How to add an attribute dynamically using javascript

Question

I want to get an element using id:

var a = document.getElementById("hello");

and then dynamically add an attribute to it called "labelText" and assign the value "{labeltext}" to it.

do i need to use concatenation?

i tried the following but it didn't work:

document.getElementById("hello").setAttribute("labelText", "'{' + labelText + '}' ");

setAttribute is the correct way of setting an attribute on a DOM element. You need to elaborate on "it didn't work". — Felix Kling
– Felix Kling, Commented Aug 22, 2016 at 0:45

Makyen · Accepted Answer · 2016-08-22 00:54:17Z

2

What you are doing basically works, with the syntax errors first explicitly identified by Vohuman corrected.

//Assign the Attribute:
var labelText='Some Value';
document.getElementById("hello").setAttribute('labelText', '{' + labelText + '}' );

//Define some variables for getting the results
var attributeEl = document.getElementById("attribute");
var theHTMLEl = document.getElementById("theHTML");

///Get the attribute value
var textLabelValue = document.getElementById("hello").getAttribute('labelText');

//Show the results:
attributeEl.textContent = textLabelValue;
theHTMLEl.textContent = document.getElementById("hello").outerHTML;

<div id="hello"></div>
The labelText attribute is:
<div id="attribute"></div>
The resulting HTML is:
<div id="theHTML"></div>

edited Aug 22, 2016 at 0:54

answered Aug 22, 2016 at 0:48

Makyen♦

33.6k12 gold badges94 silver badges128 bronze badges

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

Collectives™ on Stack Overflow

How to add an attribute dynamically using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related