Create new element from selector?

Question

How can I create a new element using just a selector? (eg .myclass , #myid or a:not(.someclass) ) Basically there is no way for you to tell if the element is a div, span, li, an anchor, if it's a div with a class or with an id and so on.

In jQuery I know you can do $(selector) to get a usable DOM object. But how can this be done in JavaScript?

Answer 1

In jQuery I know you can do $(selector) to get a usable DOM object...

Not to create one. jQuery will do a search in the DOM for existing matches. You can do $("<div>") and such (note that's HTML, not a CSS selector) to create elements, but jQuery doesn't have a feature for creating elements from CSS selectors.

But how can this be done in JavaScript?

You'll have to parse the selector, and then use document.createElement with the tag name, and then set any classes or other things the selector describes on the new element.

CSS selectors aren't very hard to parse. You'll be able to find a lib that does it. (jQuery has Sizzle, which is a selector engine, built in and Sizzle is open source. It will naturally have code to parse selectors.)

Answer 2

Mootools does this.

new Element('#name.class')

yields

<div id=​"name" class=​"class">​</div>​

Answer 3

How can I create a new element using just a selector? (eg .myclass , #myid or a:not(.someclass) ) Basically there is no way for you to tell if the element is a div, span, li, an anchor, if it's a div with a class or with an id and so on.

In jQuery I know you can do $(selector) to get a usable DOM object. But how can this be done in JavaScript?