What is the accepted method of dom manipulation in jQuery (creating and
inserting new dom nodes).
I can't seam to find a reasonably intuitive method of doing this using
jQuery internals.
A good example. Given a jQuery object which contains a ul tag. How would
one insert a new li tag, and then insert some user specified *TEXT*.
With emphasis on it being text, for the li, not some random html. The
standard use case of this, is "given a ul tag and an array of data,
inject a number of li tags containing that data".
In my own framework at work the methods like append (while they do
accept dom nodes and other objects) have the primary purpose of creating
an injecting new nodes. The first argument to them is a tag name and
they also accept an object of attributes.
So for that example:
var list = ['foo', 'bar', 'baz'];
var ul = pf('#myul');
list.forEach(function(data) {
ul.append('li').text(data);
});
So the question is, "How does one do something like this in jQuery?"
((Btw: My framework does include a compatibility layer for the moz
methods like forEach; I'd probably include those in any other work as
well anyways))
I noticed that jQuery's append does handle XHTML style input (and it
parses it on it's own instead of going through innerHTML by the looks of
it; a plus for me), however the following does not work as one might expect:
var list = ['foo', 'bar', 'baz'];
var ul = $('#myul');
list.forEach(function(data) {
ul.append('<li />').text(data);
});
That would be because the .append returns the object containing the ul
not the new li.
And note, I do not consider the following to be an acceptable robust
method of manipulation; The data is user supplied so it shouldn't be
inserted in a place where it could be considered html, it looks fairly
unclean imho, and it does not extend past the simplest of acts because
you still cannot use anything like .attr or whatnot to further
manipulate the data:
var list = ['foo', 'bar', 'baz'];
var ul = pf('#myul');
list.forEach(function(data) {
ul.append('<li>'+data+'</li>');
});
Also being required to run another method just to chain with something
you just created isn't an acceptable robust method. As well if I have to
go calling document.createElement then there is little point in using
jQuery for this in the first place.
So is there another robust method I am missing, or any suggestions for
robust methods which could be developed as improvements?
--
~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://nadir-seen-fire.com]
-Nadir-Point (http://nadir-point.com)
-Wiki-Tools (http://wiki-tools.com)
-MonkeyScript (http://monkeyscript.nadir-point.com)
-Animepedia (http://anime.wikia.com)
-Narutopedia (http://naruto.wikia.com)
-Soul Eater Wiki (http://souleater.wikia.com)
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery Development" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=en
-~----------~----~----~----~------~----~------~--~---
