Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #16399 > unrolled thread

appendChildren versus innerhtml

Back to article view | Back to comp.lang.javascript

Contents

  appendChildren versus innerhtml Andrew Poulos <ap_prog@hotmail.com> - 2012-10-05 08:08 +1000
    Re: appendChildren versus innerhtml Danny <dann90038@gmail.com> - 2012-10-04 15:41 -0700
    Re: appendChildren versus innerhtml Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-10-05 01:02 +0200
      Re: appendChildren versus innerhtml Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-10-05 01:25 +0200
      Re: appendChildren versus innerhtml Andrew Poulos <ap_prog@hotmail.com> - 2012-10-05 09:58 +1000
    Re: appendChildren versus innerhtml Martin Honnen <mahotrash@yahoo.de> - 2012-10-05 11:36 +0200
      Re: appendChildren versus innerhtml Andrew Poulos <ap_prog@hotmail.com> - 2012-10-06 18:31 +1000
    Re: appendChildren versus innerhtml Matt McDonald <matt@fortybelow.ca> - 2012-10-05 15:46 -0400

#16399 — appendChildren versus innerhtml

If the server can return "arbitrary" but valid HTML such as

"<div id='textbox01' style='position:absolute; left:36px; top:92px; 
overflow: visible;'>" +
"<div style='position:absolute; left:0px; top:0px; width:496px; 
height:488px; overflow:auto ; border-radius: 0px 0px 0px 0px'></div>" +
"<div style='position:absolute; left:0px; top:0px; width:496px; 
height:488px; overflow:auto ; border-radius: 0px 0px 0px 0px'>" +
"<div style='; padding-left:0px; padding-right:0px; padding-top:0px; 
padding-bottom:0px'>" +
"<p style='margin-top:0pt;margin-bottom:0pt;'><span 
style='font-size:14pt;color:#000000;font-weight:bold;'><sup>The 
Emergence</sup></span></p>" +
"<p style='margin-top:0pt;margin-bottom:0pt;'><span 
style='color:#000000;'>The effect of globalisation and, more. 
</span></p>" +
"<p style='margin-top:0pt;margin-bottom:0pt;'><span 
style='color:#000000;'>&nbsp;</span></p>" +
"<p style='margin-top:0pt;margin-bottom:0pt;'><span 
style='color:#000000;'>I propose to consider </span></p>" +
"<p style='margin-top:0pt;margin-bottom:0pt;'><span 
style='color:#000000;'></span></p>" +
"</div></div></div>" +
"<div id='kb1' style='position:absolute; left:572px; top:208px; 
width:400px; height:264px;'><img id='kb1img' 
src='images/020808_1633_0030_lsls.jpg' alt='extreme' title='' 
style='position:absolute; left:0px; top:0px; width:100%; height:100%; 
margin:0;'></div>"

how can you possibly parse it and use createElement/appendChild to 
recreate the HTML. Currently I'm using innerHTML.

Andrew Poulos

[toc] | [next] | [standalone]

#16401

You don't, you use .innerHTML, unless you have an specific reason you haven't mentioned you really really have to DOM the whole string.  There's no difference for the output btw, if you're just WRITING it to the page and not reading it later on, like say retrieving <p></p> or any <div></div> text or children for it, .innerHTML is fine.

If what you need is markup from the webserver, then why can't you just have the webserver serve markup?

[toc] | [prev] | [next] | [standalone]

#16406

Andrew Poulos wrote:

> If the server can return "arbitrary" but valid HTML such as
> 
> "<div id='textbox01' style='position:absolute; left:36px; top:92px;
> overflow: visible;'>" +
> "<div style='position:absolute; left:0px; top:0px; width:496px;
> height:488px; overflow:auto ; border-radius: 0px 0px 0px 0px'></div>" +
> "<div style='position:absolute; left:0px; top:0px; width:496px;
> height:488px; overflow:auto ; border-radius: 0px 0px 0px 0px'>" +
> "<div style='; padding-left:0px; padding-right:0px; padding-top:0px;
> padding-bottom:0px'>" +
> "<p style='margin-top:0pt;margin-bottom:0pt;'><span
> style='font-size:14pt;color:#000000;font-weight:bold;'><sup>The
> Emergence</sup></span></p>" +
> "<p style='margin-top:0pt;margin-bottom:0pt;'><span
> style='color:#000000;'>The effect of globalisation and, more.
> </span></p>" +
> "<p style='margin-top:0pt;margin-bottom:0pt;'><span
> style='color:#000000;'>&nbsp;</span></p>" +
> "<p style='margin-top:0pt;margin-bottom:0pt;'><span
> style='color:#000000;'>I propose to consider </span></p>" +
> "<p style='margin-top:0pt;margin-bottom:0pt;'><span
> style='color:#000000;'></span></p>" +
> "</div></div></div>" +
> "<div id='kb1' style='position:absolute; left:572px; top:208px;
> width:400px; height:264px;'><img id='kb1img'
> src='images/020808_1633_0030_lsls.jpg' alt='extreme' title=''
> style='position:absolute; left:0px; top:0px; width:100%; height:100%;
> margin:0;'></div>"
> 
> how can you possibly parse it and use createElement/appendChild to
> recreate the HTML. Currently I'm using innerHTML.

You can parse this efficiently using a regular expression containing token 
patterns matching grammar atoms in alternation and RegExp.prototype.exec(), 
then apply createElement/appendChild on the result.

Unless you use setAttribute(), certain attributes must be handled specially 
because of their non-identifier name.  The `style' attribute must be handled 
as a special case, i.e. you need to parse the attribute value to set style 
properties; either with the bracket property accessor syntax and a mapper 
for non-identifier style property names, or with 
CSSStyleDeclaration::setProperty().

ISTM you should prefer the `innerHTML' branch if that property is available 
and applicable to your use-case; it may be still proprietary but it merely 
encapsulates what browsers do best (within their limits): parse HTML so that 
the result can be rendered.  But why does the server return HTML in the 
first place?


PointedEars
-- 
Sometimes, what you learn is wrong. If those wrong ideas are close to the 
root of the knowledge tree you build on a particular subject, pruning the 
bad branches can sometimes cause the whole tree to collapse.
  -- Mike Duffy in cljs, <news:Xns9FB6521286DB8invalidcom@94.75.214.39>

[toc] | [prev] | [next] | [standalone]

#16407

Thomas 'PointedEars' Lahn wrote:

> Andrew Poulos wrote:
>> If the server can return "arbitrary" but valid HTML such as
>> […]
>> how can you possibly parse it and use createElement/appendChild to
>> recreate the HTML. Currently I'm using innerHTML.
> 
> You can parse this efficiently using a regular expression containing token
> patterns matching grammar atoms in alternation and
> RegExp.prototype.exec(), then apply createElement/appendChild on the
> result.

CAVEAT: The RegExp must have the `global' flag set so that exec() looks for 
all matches and control can exit the loop in which it is used when exec() 
returns `null'.  Otherwise the loop will be endless if there is a first 
match, and your script engine and browser (tab) will hang.

Also, if there are two atoms with the same prefix, the first-match-wins rule 
inherent to RegExp's alternation (as opposed to the longest-match-wins rule 
usually found in parsers) becomes a problem.  I have found two ways to work 
around that: If the relevant subpatterns match strings of fixed length, you 
can put the subpattern matching the longest string first.  Otherwise you 
will have to loop through the patterns and match each from the same current 
offset in the string; the longest match wins, and if there are two or more 
matches of same length, the first match should win (so you should arrange 
your subpatterns accordingly or implement precedence otherwise).  But this 
is probably not a concern for parsing HTML.


PointedEars
-- 
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
  -- from <http://www.vortex-webdesign.com/help/hidesource.htm> (404-comp.)

[toc] | [prev] | [next] | [standalone]

#16408

On 5/10/2012 9:02 AM, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
>
>> If the server can return "arbitrary" but valid HTML such as
>>
>> "<div id='textbox01' style='position:absolute; left:36px; top:92px;
>> overflow: visible;'>" +
>> "<div style='position:absolute; left:0px; top:0px; width:496px;
>> height:488px; overflow:auto ; border-radius: 0px 0px 0px 0px'></div>" +
>> "<div style='position:absolute; left:0px; top:0px; width:496px;
>> height:488px; overflow:auto ; border-radius: 0px 0px 0px 0px'>" +
>> "<div style='; padding-left:0px; padding-right:0px; padding-top:0px;
>> padding-bottom:0px'>" +
>> "<p style='margin-top:0pt;margin-bottom:0pt;'><span
>> style='font-size:14pt;color:#000000;font-weight:bold;'><sup>The
>> Emergence</sup></span></p>" +
>> "<p style='margin-top:0pt;margin-bottom:0pt;'><span
>> style='color:#000000;'>The effect of globalisation and, more.
>> </span></p>" +
>> "<p style='margin-top:0pt;margin-bottom:0pt;'><span
>> style='color:#000000;'>&nbsp;</span></p>" +
>> "<p style='margin-top:0pt;margin-bottom:0pt;'><span
>> style='color:#000000;'>I propose to consider </span></p>" +
>> "<p style='margin-top:0pt;margin-bottom:0pt;'><span
>> style='color:#000000;'></span></p>" +
>> "</div></div></div>" +
>> "<div id='kb1' style='position:absolute; left:572px; top:208px;
>> width:400px; height:264px;'><img id='kb1img'
>> src='images/020808_1633_0030_lsls.jpg' alt='extreme' title=''
>> style='position:absolute; left:0px; top:0px; width:100%; height:100%;
>> margin:0;'></div>"
>>
>> how can you possibly parse it and use createElement/appendChild to
>> recreate the HTML. Currently I'm using innerHTML.
>
> You can parse this efficiently using a regular expression containing token
> patterns matching grammar atoms in alternation and RegExp.prototype.exec(),
> then apply createElement/appendChild on the result.
>
> Unless you use setAttribute(), certain attributes must be handled specially
> because of their non-identifier name.  The `style' attribute must be handled
> as a special case, i.e. you need to parse the attribute value to set style
> properties; either with the bracket property accessor syntax and a mapper
> for non-identifier style property names, or with
> CSSStyleDeclaration::setProperty().
>
> ISTM you should prefer the `innerHTML' branch if that property is available

Ok, I'll go with innerHTML.

> and applicable to your use-case; it may be still proprietary but it merely
> encapsulates what browsers do best (within their limits): parse HTML so that
> the result can be rendered.  But why does the server return HTML in the
> first place?

There's an online editor that saves the user's input as HTML. The input 
then gets displayed in an elearning course at some later stage.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#16413

Andrew Poulos wrote:
> If the server can return "arbitrary" but valid HTML such as
>
> "<div id='textbox01' style='position:absolute; left:36px; top:92px;
> overflow: visible;'>" +
> "<div style='position:absolute; left:0px; top:0px; width:496px;
> height:488px; overflow:auto ; border-radius: 0px 0px 0px 0px'></div>" +
> "<div style='position:absolute; left:0px; top:0px; width:496px;
> height:488px; overflow:auto ; border-radius: 0px 0px 0px 0px'>" +
> "<div style='; padding-left:0px; padding-right:0px; padding-top:0px;
> padding-bottom:0px'>" +
> "<p style='margin-top:0pt;margin-bottom:0pt;'><span
> style='font-size:14pt;color:#000000;font-weight:bold;'><sup>The
> Emergence</sup></span></p>" +
> "<p style='margin-top:0pt;margin-bottom:0pt;'><span
> style='color:#000000;'>The effect of globalisation and, more.
> </span></p>" +
> "<p style='margin-top:0pt;margin-bottom:0pt;'><span
> style='color:#000000;'>&nbsp;</span></p>" +
> "<p style='margin-top:0pt;margin-bottom:0pt;'><span
> style='color:#000000;'>I propose to consider </span></p>" +
> "<p style='margin-top:0pt;margin-bottom:0pt;'><span
> style='color:#000000;'></span></p>" +
> "</div></div></div>" +
> "<div id='kb1' style='position:absolute; left:572px; top:208px;
> width:400px; height:264px;'><img id='kb1img'
> src='images/020808_1633_0030_lsls.jpg' alt='extreme' title=''
> style='position:absolute; left:0px; top:0px; width:100%; height:100%;
> margin:0;'></div>"
>
> how can you possibly parse it and use createElement/appendChild to
> recreate the HTML. Currently I'm using innerHTML.

If you have an empty element where you want to insert the HTML fragment 
then setting innerHTML of that element is the right approach. However 
these days insertAdjacentHTML 
(https://developer.mozilla.org/en-US/docs/DOM/element.insertAdjacentHTML) also 
has wide support so in case you want to insert somewhere in relation to 
already existing and populated elements that is an alternative to 
setting innerHTML and might avoid reparsing when you use
   element.insertAdjacentHTML('beforeEnd', htmlFragment)
instead of
   element.innerHTML = element.innerHTML + htmlFragment


And there is 
http://domparsing.spec.whatwg.org/#dom-range-createcontextualfragment 
although IE before version 10 does not have that.

-- 

	Martin Honnen --- MVP Data Platform Development
	http://msmvps.com/blogs/martin_honnen/

[toc] | [prev] | [next] | [standalone]

#16425

On 5/10/2012 7:36 PM, Martin Honnen wrote:
> Andrew Poulos wrote:
>> If the server can return "arbitrary" but valid HTML such as
>>
>> "<div id='textbox01' style='position:absolute; left:36px; top:92px;
>> overflow: visible;'>" +
>> "<div style='position:absolute; left:0px; top:0px; width:496px;
>> height:488px; overflow:auto ; border-radius: 0px 0px 0px 0px'></div>" +
>> "<div style='position:absolute; left:0px; top:0px; width:496px;
>> height:488px; overflow:auto ; border-radius: 0px 0px 0px 0px'>" +
>> "<div style='; padding-left:0px; padding-right:0px; padding-top:0px;
>> padding-bottom:0px'>" +
>> "<p style='margin-top:0pt;margin-bottom:0pt;'><span
>> style='font-size:14pt;color:#000000;font-weight:bold;'><sup>The
>> Emergence</sup></span></p>" +
>> "<p style='margin-top:0pt;margin-bottom:0pt;'><span
>> style='color:#000000;'>The effect of globalisation and, more.
>> </span></p>" +
>> "<p style='margin-top:0pt;margin-bottom:0pt;'><span
>> style='color:#000000;'>&nbsp;</span></p>" +
>> "<p style='margin-top:0pt;margin-bottom:0pt;'><span
>> style='color:#000000;'>I propose to consider </span></p>" +
>> "<p style='margin-top:0pt;margin-bottom:0pt;'><span
>> style='color:#000000;'></span></p>" +
>> "</div></div></div>" +
>> "<div id='kb1' style='position:absolute; left:572px; top:208px;
>> width:400px; height:264px;'><img id='kb1img'
>> src='images/020808_1633_0030_lsls.jpg' alt='extreme' title=''
>> style='position:absolute; left:0px; top:0px; width:100%; height:100%;
>> margin:0;'></div>"
>>
>> how can you possibly parse it and use createElement/appendChild to
>> recreate the HTML. Currently I'm using innerHTML.
>
> If you have an empty element where you want to insert the HTML fragment
> then setting innerHTML of that element is the right approach. However
> these days insertAdjacentHTML
> (https://developer.mozilla.org/en-US/docs/DOM/element.insertAdjacentHTML) also
> has wide support so in case you want to insert somewhere in relation to
> already existing and populated elements that is an alternative to
> setting innerHTML and might avoid reparsing when you use
>    element.insertAdjacentHTML('beforeEnd', htmlFragment)
> instead of
>    element.innerHTML = element.innerHTML + htmlFragment

Hmm, I never knew about insertAdjacentHTML. I'll experiment with it.

> And there is
> http://domparsing.spec.whatwg.org/#dom-range-createcontextualfragment
> although IE before version 10 does not have that.

Alas I need to support back to IE 6 but its something I'll investigate..

One odd thing I've discovered is that if there's  say an OBJECT playing 
an MP3 and I set the innerHTML to "" the MP3 sometimes keeps playing. 
I've had to search for MP3 and explicitly stop them before I set the 
innerHTML to "". Is that typical?

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#16418

On 04/10/12 18:08, Andrew Poulos wrote:

> If the server can return "arbitrary" but valid HTML such as

[HTML mark-up]

> how can you possibly parse it and use createElement/appendChild  to
> recreate the HTML. Currently I'm using innerHTML.

Is there a reason why a data format such as JSON or XML can not be used?
`innerHTML`'s ease is complicated by security issues in older browsers.
By directly implanting HTML from the server, you have opened up a
potential security hole.

If a data format such as JSON is used, I suggest a factory approach.
Parse the JSON and then determine which recipe is to be requested from
the factory. This pattern has the advantage of existing pseudo-templates
without using slovenly templating engines.

For example⁰:

// see: isHostMethod, Utils.is.hostObject, etc.
function isHostObject (
         obj
)
{
         return true;
}

function appendNode(
         parNode,
         node
)
{
         var result = null;
         if (isHostObject(parNode) &&
                 isHostObject(parNode.appendChild)) {
                 result = parNode.appendChild(
                         node
                 );
         }
         return result;
}

function createText(
         doc,
         text
)
{
         var result = null;
         if (isHostObject(doc) &&
                 isHostObject(doc.createTextNode)) {
                 result = doc.createTextNode(
                         text
                 );
         }
         return result;
}

function replaceStyle(
         node,
         prop,
         val
)
{
         var s = "style",
                 result = null;
         if (isHostObject(node) &&
                 isHostObject(node[s])) {
                 result = (node[s][prop] = val);
         }
         return result;
}

function createElement(
         doc,
         tagName
)
{
         var result = null;
         if (isHostObject(doc) &&
                 isHostObject(doc.createElement)) {
                 result = doc.createElement(
                         tagName
                 );
         }
         return result;
}

function createColourSpan(
         colour
)
{
         var span = createElement([document], "span"),
                 result = null;
         if (span) {
                 result = span;
                 replaceStyle(
                         span,
                         "color",
                         colour
                 );
         }
         return result;
}

function createColouredText(
         colour,
         text
)
{
         var span = createColourSpan(colour),
                 textNode = createText([document], text);
         appendNode(
                 span,
                 textNode
         );
         return span;
}

This strategy is not a true factory pattern--as referenced in the
Object-Oriented Programming community--but can be sufficient for
similar needs. The creation logic is hidden within helper functions,
but is not formally attached to a factory object like the true pattern.

⁰: Instances of `[document]' are placeholders for a real Document.
The square brackets are intended to represent edited text, not an
Array literal.

-- 
`The theologian Meric Casaubon argued--in his 1668 book, *Of Credulity
and Incredulity*--that witches must exist because, after all, everyone
believes in them. Anything that a large number of people believe must
be true.'--Carl Sagan--*The Demon-Haunted World*.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web