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.

回答1:

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:

Just set an attribute to the empty string.

element.setAttribute('hidden', '')

回答3:

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);

回答4:

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);

来源：https://stackoverflow.com/questions/24840083/how-to-generate-dom-nodes-with-valueless-attributes

标签

javascript

html

dom

polymer