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

Groups > comp.lang.javascript > #16406

Re: appendChildren versus innerhtml

Followups directed to: comp.lang.javascript

Show key headers only | View raw

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>

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

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

csiph-web