4

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.

sinan
  • 6,809
  • 6
  • 38
  • 67
  • 1
    please, take a look on [Crescent Fresh's answer](http://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro) – Sergey Jul 19 '14 at 11:55

4 Answers4

7

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?

  • 2
    While it's true that `` or `` or `` will (probably) work in most browsers, they are not valid according to the HTML5 spec... in fact, `true` and `false` are explicitly disallowed. Per the spec, the only permitted values for boolean attributes are an empty string or the attribute's name: http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#boolean-attributes – Martin Aug 01 '15 at 23:36
3

Just set an attribute to the empty string.

element.setAttribute('hidden', '')
dfreedm
  • 834
  • 5
  • 5
  • Why the downvote? Setting it to an empty string is perfectly valid in html5; in fact, setting it to anything *other* than an empty string or the attribute name is explicitly *not* valid: "If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace." (http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#boolean-attributes) – Martin Aug 01 '15 at 23:30
2

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);
Valentin Mercier
  • 5,256
  • 3
  • 26
  • 50
1

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);
dfsq
  • 191,768
  • 25
  • 236
  • 258
  • `createAttribute` returns an attribute with the value set to an empty string – Dr.Molle Jul 19 '14 at 12:05
  • @Dr.Molle as far as it's printed as I want I think it's OK. createAttribute does not add attributes like `attr=""`. – sinan Jul 19 '14 at 12:10
  • Interestingly, I know realize that `.setAttribute("layout", "");` also doesn't generate `attr=""`. – sinan Jul 19 '14 at 12:12
  • Define "printed"! When you inspect the document via developer-tools you only see a representation created by the browser, but the value is set(to the empty string). Reference: [**The value of the attribute is the empty string**](http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1084891198) – Dr.Molle Jul 19 '14 at 12:17
  • 1
    I'm confused why this would be marked as the correct answer, when it does NOT create a "valueless" attribute as was requested by the OP, since no such things exist. –  Jul 19 '14 at 13:08