CODEWITHSUNDEEP
javascripthtmldompolymer
osa1
osa1

Reputation: 7078

How to generate DOM nodes with valueless attributes

I'm trying to generate nodes like this:

<div layout horizontal></div>

using DOM API.

I'm trying something like this:

var d = document.createElement("div");
d.setAttribute(...);

but never really managed to generate what I want. Any ideas how to do this?

Thanks.

Upvotes: 4

Views: 2948

Answers (4)

user663031
user663031

Reputation:

The subject of your question reflects the basic confusion here. There is no such things as a "valueless attribute". There is merely a syntactic convenience available in HTML to write an attribute with no specific value, in cases where the mere presence of the attribute means something, whatever its value.

So you could write <input required> or <input required='true'> or <input required='false'> or <input required='notrequired'> and it would mean exactly the same thing (which is that input is required).

When you try to "print", in your words, the "valueless" attribute, whoever is responsible for the "printing" may choose to "be nice to you" and represent the attribute with no value, rather than showing the empty string. However, this does not change the fact that the attribute does have a value of the empty string, as can be seen easily by taking elt.getAttribute and examining the attribute value directly.

For instance, if I create a new div, then set its inner HTML to <input required="">, then certain environments, such as Chrome devtools, will show the element as <input required> rather than <input required="">. It's just syntactic sugar on both the way in and the way out, in other words.

Once I've created an element with a "valueless" attribute, which is actually an empty string, perhaps I can then make it truly valueless by setting the attribute value to null? Nope. elt.setAttribute('required', null) merely sets the attribute value to the string "null". Same for undefined.

Note that the DOM specification specifies an attribute of specified on Attr objects. However, as far as I can tell, this does not seem to be used, in the sense that, an attribute created by document.createAttribute always gets specified set to true, an attribute created by parsing HTML as in x.innerHTML = '<input required>'; always gets specified set to true, etc. And specified is marked readonly, so there's no way to examine what the effects of setting it to false would be anyway.

Anyway, what is your objective here? Why do you think you need to do this?

Upvotes: 7

dfreedm
dfreedm

Reputation: 834

Just set an attribute to the empty string.

element.setAttribute('hidden', '')

Upvotes: 3

Valentin Mercier
Valentin Mercier

Reputation: 5326

You are looking for the createAttribute() and setAttributeNode() methods.

var elelement = document.createElement('div'),
var attribute = document.createAttribute('layout');
var attribute2 = document.createAttribute('horizontal');
element.setAttributeNode(attribute);
element.setAttributeNode(attribute2);

Upvotes: 2

dfsq
dfsq

Reputation: 193261

You can use setAttributeNode method of the element to append attribute node created with createAttribute:

var el = document.createElement('div'),
    attr = document.createAttribute('layout');

el.setAttributeNode(attr);

Upvotes: 1

Related Questions