Robust pattern for DOM manipulation
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body bgcolor="#ffffff" text="#000000">
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 <b>TEXT</b>.
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:
<pre>var list = ['foo', 'bar', 'baz'];
var ul = pf('#myul');
list.forEach(function(data) {
ul.append('li').text(data);
});</pre>
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:
<pre>var list = ['foo', 'bar', 'baz'];
var ul = $('#myul');
list.forEach(function(data) {
ul.append('<li />').text(data);
});</pre>
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:
<pre>var list = ['foo', 'bar', 'baz'];
var ul = pf('#myul');
list.forEach(function(data) {
ul.append('<li>'+data+'</li>');
});</pre>
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?
<pre class="moz-signature" cols="72">--
~Daniel Friesen (Dantman, Nadir-Seen-Fire) [<a class="moz-txt-link-freetext" href="http://nadir-seen-fire.com">http://nadir-seen-fire.com</a>]
-Nadir-Point (<a class="moz-txt-link-freetext" href="http://nadir-point.com">http://nadir-point.com</a>)
-Wiki-Tools (<a class="moz-txt-link-freetext" href="http://wiki-tools.com">http://wiki-tools.com</a>)
-MonkeyScript (<a class="moz-txt-link-freetext" href="http://monkeyscript.nadir-point.com">http://monkeyscript.nadir-point.com</a>)
-Animepedia (<a class="moz-txt-link-freetext" href="http://anime.wikia.com">http://anime.wikia.com</a>)
-Narutopedia (<a class="moz-txt-link-freetext" href="http://naruto.wikia.com">http://naruto.wikia.com</a>)
-Soul Eater Wiki (<a class="moz-txt-link-freetext" href="http://souleater.wikia.com">http://souleater.wikia.com</a>)
</pre>