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

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

inner outer html and appendchild

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

Contents

  inner outer html and appendchild Andrew Poulos <ap_prog@hotmail.com> - 2017-05-29 16:22 +1000
    Re: inner outer html and appendchild Julio Di Egidio <julio@diegidio.name> - 2017-05-29 01:30 -0700
    Re: inner outer html and appendchild Martin Honnen <martin.honnen@gmx.de> - 2017-05-29 11:28 +0200
      Re: inner outer html and appendchild Andrew Poulos <ap_prog@hotmail.com> - 2017-05-29 20:21 +1000
        Re: inner outer html and appendchild Martin Honnen <martin.honnen@gmx.de> - 2017-05-29 12:25 +0200
    Re: inner outer html and appendchild Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-05-29 19:04 +0200
      Re: inner outer html and appendchild Julio Di Egidio <julio@diegidio.name> - 2017-05-29 10:20 -0700
        Re: inner outer html and appendchild Andrew Poulos <ap_prog@hotmail.com> - 2017-05-30 07:40 +1000
          Re: inner outer html and appendchild Julio Di Egidio <julio@diegidio.name> - 2017-05-29 22:32 -0700
            Re: inner outer html and appendchild Andrew Poulos <ap_prog@hotmail.com> - 2017-05-30 17:29 +1000
              Re: inner outer html and appendchild Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-05-30 13:13 +0200
                Re: inner outer html and appendchild Tim Streater <timstreater@greenbee.net> - 2017-05-30 12:34 +0100
              Re: inner outer html and appendchild Julio Di Egidio <julio@diegidio.name> - 2017-05-30 05:28 -0700

#33417 — inner outer html and appendchild

I know about the differences between innerHTML and appendChild but I'm 
in a bit of a bind. If the uses passes a valid html element as a string 
how do I add it to the document without needing to parse the sting or 
contain it in a DIV?

For example, the users passes (the dots are for brevity)
   str = "<img id='.' src='..jpg' alt='.' style='.' >";
or
   str = "<div id='.' style='.'><p id='.' style='.'>Text <span 
style='.'></span></p></div";

Ideally I'd like to do something like
   document.body.appendChild(str);
I've got is this:

var d = document.createElement("div");
d.outerHTML = str;
document.body.appendChild(d);

but that, unsurprisingly, fails with "This element has no parent node." 
while this

var d = document.createElement("div");
d.id = "abcdef";
document.body.appendChild(d);
document.getElementById("abcdef").outerHTML = str;

seems to work.

Andrew Poulos

[toc] | [next] | [standalone]

#33418

On Monday, May 29, 2017 at 8:22:39 AM UTC+2, Andrew Poulos wrote:

> var d = document.createElement("div");
> d.outerHTML = str;
> document.body.appendChild(d);
> 
> but that, unsurprisingly, fails with "This element has no parent node."

As unsurprisingly, just swap the 2nd and 3rd statement, or use innerHTML.

Julio

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

#33419

On 29.05.2017 08:22, Andrew Poulos wrote:
> I know about the differences between innerHTML and appendChild but I'm 
> in a bit of a bind. If the uses passes a valid html element as a string 
> how do I add it to the document without needing to parse the sting or 
> contain it in a DIV?
> 
> For example, the users passes (the dots are for brevity)
>    str = "<img id='.' src='..jpg' alt='.' style='.' >";
> or
>    str = "<div id='.' style='.'><p id='.' style='.'>Text <span 
> style='.'></span></p></div";
> 
> Ideally I'd like to do something like
>    document.body.appendChild(str);

Use
   document.body.insertAdjacentHTML('beforeEnd', str)

https://www.w3.org/TR/DOM-Parsing/#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text 
and http://caniuse.com/#search=insertAdjacentHTML suggests it is usable

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

#33420

On 29/05/2017 7:28 PM, Martin Honnen wrote:
> On 29.05.2017 08:22, Andrew Poulos wrote:
>> I know about the differences between innerHTML and appendChild but I'm 
>> in a bit of a bind. If the uses passes a valid html element as a 
>> string how do I add it to the document without needing to parse the 
>> sting or contain it in a DIV?
>>
>> For example, the users passes (the dots are for brevity)
>>    str = "<img id='.' src='..jpg' alt='.' style='.' >";
>> or
>>    str = "<div id='.' style='.'><p id='.' style='.'>Text <span 
>> style='.'></span></p></div";
>>
>> Ideally I'd like to do something like
>>    document.body.appendChild(str);
> 
> Use
>    document.body.insertAdjacentHTML('beforeEnd', str)

Thanks.

> https://www.w3.org/TR/DOM-Parsing/#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text 
> and http://caniuse.com/#search=insertAdjacentHTML suggests it is usable

MDN suggests it's supported by IE as far back as version 4.

Andrew Poulos

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

#33421

On 29.05.2017 12:21, Andrew Poulos wrote:

>>> Ideally I'd like to do something like
>>>    document.body.appendChild(str);
>>
>> Use
>>    document.body.insertAdjacentHTML('beforeEnd', str)
> 
> Thanks.
> 
>> https://www.w3.org/TR/DOM-Parsing/#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text 
>> and http://caniuse.com/#search=insertAdjacentHTML suggests it is usable
> 
> MDN suggests it's supported by IE as far back as version 4.

That is true but didn't help for cross-browser scripting as long as 
Mozilla did not want to support it. But they changed that years ago.

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

#33427

Andrew Poulos wrote:

> I know about the differences between innerHTML and appendChild but I'm
> in a bit of a bind. If the uses passes a valid html element as a string
> how do I add it to the document without needing to parse the sting or
> contain it in a DIV?
>  
> For example, the users passes (the dots are for brevity)
>    str = "<img id='.' src='..jpg' alt='.' style='.' >";
> or
>    str = "<div id='.' style='.'><p id='.' style='.'>Text <span
> style='.'></span></p></div";

  document.body.innerHTML += str;

is the most compatible, straightforward solution.

But document.body.insertAdjacentHTML(), as Martin suggested, is probably the 
more efficient one.

That said, you SHOULD NOT allow the user to pass HTML in the first place; 
that is a big security risk as it allows Cross-Site Scripting (XSS) attacks.

<https://www.owasp.org/index.php/Cross-site_Scripting_(XSS)>
 
-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

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

#33428

On Monday, May 29, 2017 at 7:05:00 PM UTC+2, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
> 
> > I know about the differences between innerHTML and appendChild but I'm
> > in a bit of a bind. If the uses passes a valid html element as a string
> > how do I add it to the document without needing to parse the sting or
> > contain it in a DIV?
> >  
> > For example, the users passes (the dots are for brevity)
> >    str = "<img id='.' src='..jpg' alt='.' style='.' >";
> > or
> >    str = "<div id='.' style='.'><p id='.' style='.'>Text <span
> > style='.'></span></p></div";
> 
>   document.body.innerHTML += str;
> 
> is the most compatible, straightforward solution.

Not any more compatible than the simple change I had proposed, less in line
with the original code, and, what's really worse, that is going to flush and
recreate the entire DOM from scratch, which is not just inefficient...

> But document.body.insertAdjacentHTML(), as Martin suggested, is probably
> the more efficient one.

Probably... not, and not quite in line with the original code either.

That said, what a bunch of stupid, arrogant, incompetent posers...

Julio

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

#33430

On 30/05/2017 3:20 AM, Julio Di Egidio wrote:
> On Monday, May 29, 2017 at 7:05:00 PM UTC+2, Thomas 'PointedEars' Lahn wrote:
>> Andrew Poulos wrote:
>>
>>> I know about the differences between innerHTML and appendChild but I'm
>>> in a bit of a bind. If the uses passes a valid html element as a string
>>> how do I add it to the document without needing to parse the sting or
>>> contain it in a DIV?
>>>   
>>> For example, the users passes (the dots are for brevity)
>>>     str = "<img id='.' src='..jpg' alt='.' style='.' >";
>>> or
>>>     str = "<div id='.' style='.'><p id='.' style='.'>Text <span
>>> style='.'></span></p></div";
>>
>>    document.body.innerHTML += str;
>>
>> is the most compatible, straightforward solution.
> 
> Not any more compatible than the simple change I had proposed, less in line
> with the original code, and, what's really worse, that is going to flush and
> recreate the entire DOM from scratch, which is not just inefficient...
> 
>> But document.body.insertAdjacentHTML(), as Martin suggested, is probably
>> the more efficient one.
> 
> Probably... not, and not quite in line with the original code either.
> 
> That said, what a bunch of stupid, arrogant, incompetent posers...

My question was answered in a couple of different ways and some 
additional information (to help with me with choosing a solution) was 
also provided. I'm unsure what you're reading but I'm thankful for all 
the responses (except for you last sentence).

Andrew Poulos

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

#33433

On Monday, May 29, 2017 at 11:40:13 PM UTC+2, Andrew Poulos wrote:
> On 30/05/2017 3:20 AM, Julio Di Egidio wrote:
> > On Monday, May 29, 2017 at 7:05:00 PM UTC+2, Thomas 'PointedEars' Lahn wrote:
> >> Andrew Poulos wrote:
> >>
> >>> I know about the differences between innerHTML and appendChild but I'm
> >>> in a bit of a bind. If the uses passes a valid html element as a string
> >>> how do I add it to the document without needing to parse the sting or
> >>> contain it in a DIV?
> >>>   
> >>> For example, the users passes (the dots are for brevity)
> >>>     str = "<img id='.' src='..jpg' alt='.' style='.' >";
> >>> or
> >>>     str = "<div id='.' style='.'><p id='.' style='.'>Text <span
> >>> style='.'></span></p></div";
> >>
> >>    document.body.innerHTML += str;
> >>
> >> is the most compatible, straightforward solution.
> > 
> > Not any more compatible than the simple change I had proposed, less in line
> > with the original code, and, what's really worse, that is going to flush and
> > recreate the entire DOM from scratch, which is not just inefficient...
> > 
> >> But document.body.insertAdjacentHTML(), as Martin suggested, is probably
> >> the more efficient one.
> > 
> > Probably... not, and not quite in line with the original code either.
> > 
> > That said, what a bunch of stupid, arrogant, incompetent posers...
> 
> My question was answered in a couple of different ways and some 

Some of which are wrong and misleading, in case you missed that part.

> additional information (to help with me with choosing a solution) was
> also provided. I'm unsure what you're reading but I'm thankful for all
> the responses (except for you last sentence).

Too late to play the innocent: next time say "thank you all" *before* I
point out what a bunch of cunts and morons you and co are.  In fact,
you systematically have never said thank you to myself, so indeed go
fuck yourself, moron and liar: just be reassured that I ma not here for
you.

Julio

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

#33434

On 30/05/2017 3:32 PM, Julio Di Egidio wrote:

> Too late to play the innocent: next time say "thank you all" *before* I
> point out what a bunch of cunts and morons you and co are.  In fact,
> you systematically have never said thank you to myself, so indeed go
> fuck yourself, moron and liar: just be reassured that I ma not here for
> you.

You count how many times I've said "thank you"?

Andrew Poulos

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

#33436

Andrew Poulos wrote:

> On 30/05/2017 3:32 PM, Julio Di Egidio wrote:
>> Too late to play the innocent: next time say "thank you all" *before* I
>> point out what a bunch of cunts and morons you and co are.  In fact,
>> you systematically have never said thank you to myself, so indeed go
>> fuck yourself, moron and liar: just be reassured that I ma not here for
>> you.
> 
> You count how many times I've said "thank you"?

         +-------------------+             .:\:\:/:/:.
         |   PLEASE DO NOT   |            :.:\:\:/:/:.:
         |  FEED THE TROLLS  |           :=.' -   - '.=:
         |                   |           '=(\ 9   9 /)='
         |   Thank you,      |              (  (_)  )
         |       Management  |              /`-vvv-'\
         +-------------------+             /         \
                 |  |        @@@          / /|,,,,,|\ \
                 |  |        @@@         /_//  /^\  \\_\
   @x@@x@        |  |         |/         WW(  (   )  )WW
   \||||/        |  |        \|           __\,,\ /,,/__
    \||/         |  |         |          (______Y______)
/\/\/\/\/\/\/\/\//\/\\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\
==================================================================

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

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

#33437

In article <1648775.tdWV9SEqCh@PointedEars.de>, Thomas 'PointedEars'
Lahn <PointedEars@web.de> wrote:

>         +-------------------+             .:\:\:/:/:.
>         |   PLEASE DO NOT   |            :.:\:\:/:/:.:
>         |  FEED THE TROLLS  |           :=.' -   - '.=:
>         |                   |           '=(\ 9   9 /)='
>         |   Thank you,      |              (  (_)  )
>         |       Management  |              /`-vvv-'\
>         +-------------------+             /         \
>                 |  |        @@@          / /|,,,,,|\ \
>                 |  |        @@@         /_//  /^\  \\_\
>   @x@@x@        |  |         |/         WW(  (   )  )WW
>   \||||/        |  |        \|           __\,,\ /,,/__
>    \||/         |  |         |          (______Y______)
>/\/\/\/\/\/\/\/\//\/\\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\
>==================================================================

Ah, PointyHead does not want us to reply to him anymore.

-- 
"That which can be asserted without evidence, can be dismissed without 
evidence."
-- Christopher Hitchens

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

#33439

On Tuesday, May 30, 2017 at 9:29:35 AM UTC+2, Andrew Poulos wrote:
> On 30/05/2017 3:32 PM, Julio Di Egidio wrote:
> 
> > Too late to play the innocent: next time say "thank you all" *before* I
> > point out what a bunch of cunts and morons you and co are.  In fact,
> > you systematically have never said thank you to myself, so indeed go
> > fuck yourself, moron and liar: just be reassured that I ma not here for
> > you.
> 
> You count how many times I've said "thank you"?

The miscount was your, you have snipped it.  It is not even good etiquette
on Usenet to say thank you, but what the fuck would you morons and posers
know?

*Plonk*

Julio

[toc] | [prev] | [standalone]

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

csiph-web