How to create a new element with YUI

I’m starting to dig into YUI and I think this is a good time to clear up some of the early confusions people might have since I’m experiencing them myself now. I typically try to have very little raw javascript in my code, i figure that that only invites the possibility that it won’t work in some browser. Therefore, rather than using ‘document.createElement’, I went searching for a way to create an element with YUI. I ran into a function with seems like it should do the trick, YAHOO.util.Element, which, in their demo code, can be called as a constructor like so:

var elem = new YAHOO.util.Element(’elem_id’);

However, despite that this code seems to imply that a new element will be constructed for you, it is actually just a wrapper for YAHOO.util.Dom.get which simply finds elements already in the DOM for you, like document.getElementById or prototype’s dollar function.

So, contrary to my intuition, YUI does not not provide a wrapper for document.createElement and this is actually what you are supposed to use. However, you’re probably also going to want to be able to treat your element like a YAHOO.util.Element, so you’ll need to assign your element an id and then retrieve it using YUI:

var el = document.createElement(’div’);
el.id = ‘elem_id’;
yui_el = YAHOO.util.Dom.get(el.id);

Ugly! Now you can use the nice method’s that YUI provides:

yui_el.addClass(’foo’);

I don’t like this design decision at all from YUI. I think that their reasoning is that they don’t want to clutter up the native objects that the browser provides. If that’s the case, then they shouldn’t even have an Element module, it should all just be left in the Dom module. I hope they decide to scrap this before they release it from beta. It simply doesn’t make sense to have two different object types which both refer to elements but which don’t directly inherit from one another.

Cheers!

link

This entry was posted on Monday, January 19th, 2009 at 4:31 pm and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

5 Responses to “How to create a new element with YUI”

sunchameleon Says:
April 7th, 2009 at 11:23 am

RTM man. You are creating an HTMLElement in memory and then trying to retrieve it from the DOM using YUI. Can’t get what is not there. Do this instead:

First:

var $yd = YAHOO.util.Dom;
var $ye = YAHOO.util.Element;

Get an *existing* HTMLElement from the DOM:

var myHtmlElement1 = $yd.get(’foo’);

Create a HTMLElement in memory:

var myHtmlElement2 = document.createElement(’div’);

Do something cross-browser using YUI:

$yd.insertAfter(myHtmlElement2, myHtmlElement1);

var myEl = new $ye(myHtmlElement1);
myEl.removeChild(myHtmlElement2);

YAHOO.util.Element makes element handling cross-browser and object-oriented. Now you can create widgets by subclassing from YAHOO.util.Element.

admin Says:
April 8th, 2009 at 2:12 pm

Thanks for your input sunchameleon!

In my defense, my point was that I thought that calling a constructor should create an element, not retrieve a pointer to an already existing one… They call it a ‘constructor’ for a reason, you even gotta put the word ‘new’ before it!

Pierre Spring Says:
April 29th, 2009 at 7:27 am

hi clay,
i just freaked out about the same problem … it really makes no sense whatsoever to have a new YAHOO.util.Element being a getter …
pierre

randy Says:
May 13th, 2009 at 10:49 pm

It is a bit confusing, even if you do RTM. I couldn’t find anything in the examples or API docs for YAHOO.util.Element. But, I did find this link that shows a more simplified way to create an element “in-memory”

http://cslai.coolsilon.com/2009/01/16/using-yui-for-dom-manipulation/

var el = new YAHOO.util.Element(document.createElement(’div’));
el.set(’id’, ‘yui-id’);
el.appendTo(document.body);

Jeffrey04 Says:
August 15th, 2009 at 7:42 am

found this blog via my blog stat XD

basically if document.createElement does it job well enough, I don’t see a point why YUI should create a wrapper for the method.

To use YAHOO.util.Element, you are not necessary to pass in an id. If you read the API documentation (which you should as it is far more informative than the tutorial guide), you will find that YAHOO.util.Element not only can receive an id, but also html element as well.

so if you want to create a new element, and use YAHOO.util.Element, then you can pass the element like what @randy posted

var el = new YAHOO.util.Element(document.createElement(’div’));

I like YUI2, but since it is one of the first javascript frameworks, so the coding style doesn’t look as simple as jquery’s code. However, YUI is a good as I learn a lot about javascript through it.

but you probably know about this already since this post is dated january?!

Clay’s Blog

How to create a new element with YUI

5 Responses to “How to create a new element with YUI”

Leave a Reply