Re: [webcomponents] Template element parser changes => Proposal for adding DocumentFragment.innerHTML

On Fri, May 11, 2012 at 2:03 AM, Ian Hickson <ian@hixie.ch> wrote:
> On Fri, 11 May 2012, Tab Atkins Jr. wrote:
>> For something like this:
>>
>> $("<p>Example "+exnum+":</p><p><img src="+exsrc+">").appendTo(container);
>
> Can we really not come up with anything better? It makes me really sad to
> think that the best we can do here is to go from a nice structured
> environment, concatenate our data together into a string, and then reparse
> the string back into structured data to add it to the DOM.
>
> I understand that people do this kind of thing all the time, but I've
> always at least assumed that everyone agreed that it was a necessarily
> evil because the alternatives were even worse. I had hope when we were
> discussing Element.create() that maybe we were finally coming up with a
> workable alternative, but as far as I can tell that never went anywhere
> and now we're actually talking about adding APIs to _support_ string-based
> DOM tree generation as if it's an actually sane way of writing code.
>
> Am I really the only one here who thinks this is horrifying?

I'm sure you're not the only one, but you're a rarity.  Most authors
find it really good.

It's very simple to go from having this in your static mockup:

<p>Example 1: <p><img src=image.php?foo=bar>

...to having this in your real site:

$("<p>Example "+exnum+":<p><img src="+exsrc+">").appendTo(container);

It's substantially harder to go to this:

container.appendChild(Element.create("p", ["Example"+exnum]));
container.appendChild(Element.create("p", [Element.create("img", {src:
exsrc})]));

And it's a lot harder to read, too.

Again, Element.create() is great when you're generating elements out
of lots of dynamic pieces (all the "+foo+" in your string gets
unwieldy and awkward).  It's harder to use when you're generating
elements that are static or mostly so.

~TJ

Received on Friday, 11 May 2012 00:12:58 UTC