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

Groups > comp.lang.javascript > #16408

Re: appendChildren versus innerhtml

Show all headers | View raw

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

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