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

Groups > comp.lang.javascript > #16418

Re: appendChildren versus innerhtml

Show all headers | View raw

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*.

Back to comp.lang.javascript | Previous | Next — Previous 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