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

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

Reading outerHTML

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

Contents

  Reading outerHTML Andrew Poulos <ap_prog@hotmail.com> - 2014-01-17 08:58 +1100
    Re: Reading outerHTML "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2014-01-17 08:55 +0200
      Re: Reading outerHTML "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-01-17 11:20 +0100
        Re: Reading outerHTML Ben Bacarisse <ben.usenet@bsb.me.uk> - 2014-01-17 12:58 +0000
          Re: Reading outerHTML "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-01-17 15:44 +0100
        Re: Reading outerHTML Christoph Michael Becker <cmbecker69@arcor.de> - 2014-01-17 22:26 +0100
    Re: Reading outerHTML Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-01-17 16:27 +0100
      Re: Reading outerHTML Christoph Michael Becker <cmbecker69@arcor.de> - 2014-01-17 22:21 +0100
        Re: Reading outerHTML Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-01-17 23:32 +0100
          Re: Reading outerHTML Christoph Michael Becker <cmbecker69@arcor.de> - 2014-01-18 02:02 +0100
            Re: Reading outerHTML "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-01-18 11:55 +0100
            Re: Reading outerHTML Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-01-18 12:06 +0100

#22649 — Reading outerHTML

I have some HTML which is written as
   <select style="width:80%;"

When I get the outerHTML of the element in IE9+ and other non-IE 
browsers I get
   <select style="width:80%;"

In IE7 and 8 I get
   <SELECT style="WIDTH:80%;"

Yet if I do a string replace like
   el.outerHTML = el.outerHTML.replace("<\/SELECT>", a + "<\/SELECT>");
It "works" in all browsers except IE9+.

Andrew Poulos

[toc] | [next] | [standalone]

#22651

2014-01-16 23:58, Andrew Poulos wrote:

> I have some HTML which is written as
>    <select style="width:80%;"
>
> When I get the outerHTML of the element in IE9+ and other non-IE
> browsers I get
>    <select style="width:80%;"

Yes. And you would get the same if your markup had
<SELECT Style="width:80%;"
since serialization canonicalizes tag and attribute names to lower case. 
This is common browser practice and being standardized in HTML5.

> In IE7 and 8 I get
>    <SELECT style="WIDTH:80%;"

They apply their own, messy canonicalization. This usually isn't a 
problem, since if you need to work on the serialized format, you can do 
that in a case-insensitive manner.

> Yet if I do a string replace like
>    el.outerHTML = el.outerHTML.replace("<\/SELECT>", a + "<\/SELECT>");
> It "works" in all browsers except IE9+.

This relates to the serialization of the end tag, which you did not mention.

You must be misinterpreting the results.

It is canonicalized to </select>, except in old versions of IE, which 
canonicalize to </SELECT>. Therefore, the code above does not do 
anything, except in IE 8 and older. Tested on Chrome, Firefox, IE 9.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/

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

#22653

"Jukka K. Korpela" <jkorpela@cs.tut.fi> wrote on 17 jan 2014 in
comp.lang.javascript: 

> 2014-01-16 23:58, Andrew Poulos wrote:
> 
>> I have some HTML which is written as
>>    <select style="width:80%;"
>>
>> When I get the outerHTML of the element in IE9+ and other non-IE
>> browsers I get
>>    <select style="width:80%;"
> 
> Yes. And you would get the same if your markup had
> <SELECT Style="width:80%;"
> since serialization canonicalizes tag and attribute names to lower case.
> This is common browser practice and being standardized in HTML5.
> 
>> In IE7 and 8 I get
>>    <SELECT style="WIDTH:80%;"
> 
> They apply their own, messy canonicalization. This usually isn't a 
> problem, since if you need to work on the serialized format, you can do 
> that in a case-insensitive manner.
> 
>> Yet if I do a string replace like
>>    el.outerHTML = el.outerHTML.replace("<\/SELECT>", a + "<\/SELECT>");
>> It "works" in all browsers except IE9+.
> 
> This relates to the serialization of the end tag, which you did not
> mention. 
> 
> You must be misinterpreting the results.
> 
> It is canonicalized to </select>, except in old versions of IE, which 
> canonicalize to </SELECT>. Therefore, the code above does not do 
> anything, except in IE 8 and older. Tested on Chrome, Firefox, IE 9.
> 

So use regex in replace(). [not knowing regex is not an excuse, learn!]

el.outerHTML = el.outerHTML.replace(/<\/select>/i, a + '<\/select>');

or even:

el.outerHTML = el.outerHTML.replace(/(<\/select>)/i, a + '$1');


btw, is outerHTML available on all browsers?


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#22654

"Evertjan." <exxjxw.hannivoort@inter.nl.net> writes:
<snip>
> or even:
>
> el.outerHTML = el.outerHTML.replace(/(<\/select>)/i, a + '$1');

... or el.outerHTML = el.outerHTML.replace(/<\/select>/i, a + '$&');

-- 
Ben.

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

#22655

Ben Bacarisse <ben.usenet@bsb.me.uk> wrote on 17 jan 2014 in 
comp.lang.javascript:

> "Evertjan." <exxjxw.hannivoort@inter.nl.net> writes:
> <snip>
>> or even:
>>
>> el.outerHTML = el.outerHTML.replace(/(<\/select>)/i, a + '$1');
> 
> ... or el.outerHTML = el.outerHTML.replace(/<\/select>/i, a + '$&');

Indeed, 
both preserve the capitalisation of the input string,
even if it was '<\/seLEct>'. [quod non]

var s = 'outerHTML';
alert( s.replace(/Oute.{2}tml/i, '$&---$&' ) );
alert( s.replace(/(Oute.{2}tml)/i, '$1---$1' ) );
alert( s.replace(/(Oute.{2}tml)/i, '$1---$&' ) );

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#22658

Evertjan. wrote:

> btw, is outerHTML available on all browsers?

According to MDN[1] it is widely implemented.  I don't know if it's
recommendable to use it, though.

[1]
<https://developer.mozilla.org/en-US/docs/Web/API/element.outerHTML#Browser_compatibility>

-- 
Christoph M. Becker

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

#22656

Andrew Poulos wrote:

> I have some HTML which is written as
>    <select style="width:80%;"
> 
> When I get the outerHTML of the element in IE9+ and other non-IE
> browsers I get
>    <select style="width:80%;"
> 
> In IE7 and 8 I get
>    <SELECT style="WIDTH:80%;"
> 
> Yet if I do a string replace like
>    el.outerHTML = el.outerHTML.replace("<\/SELECT>", a + "<\/SELECT>");
> It "works" in all browsers except IE9+.

1. There is no question.
2. Your example method call does not relate to your example markup.
3. You have not told the value of “a”.
4. Do not use String.prototype.replace() with HTML unless you know what you
   are doing.
5. Avoid the “outerHTML” property.

<http://PointedEars.de/faq#posting>

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

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

#22657

Thomas 'PointedEars' Lahn wrote:

> 5. Avoid the “outerHTML” property.

Is there any particular reason besides outerHTML being non standardized
(yet)?  Do the restrictions mentioned in the FAQ section "How do I
modify the content of the current page?"[1] apply to outerHTML as well?
 And do they still hold for recent IE versions wrt. innerHTML?

[1] <http://pointedears.de/scripts/faq/cljs/>

-- 
Christoph M. Becker

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

#22660

Christoph Michael Becker wrote:

> Thomas 'PointedEars' Lahn wrote:
>> 5. Avoid the “outerHTML” property.
> 
> Is there any particular reason besides outerHTML being non standardized
> (yet)? 

Yes.

> Do the restrictions mentioned in the FAQ section "How do I
> modify the content of the current page?"[1] apply to outerHTML as well?

Probably.

>  And do they still hold for recent IE versions wrt. innerHTML?

I do not know.  Which IE versions exactly do you consider “recent”?
 
> [1] <http://pointedears.de/scripts/faq/cljs/>

I may have been misunderstood with regard to referring to the FAQ for 
comp.lang.javascript.  It is appropriate to use both the name of the section 
and its URI to refer to it, although URIs containing section numbers should 
be avoided because they cannot be guaranteed to continue to work, should the 
FAQ be restructured.  In this case, the appropriate URI is
<http://PointedEars.de/faq#updateContent>.  TIA.
 
-- 
PointedEars, ed.

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

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

#22663

Thomas 'PointedEars' Lahn wrote:

> Christoph Michael Becker wrote:
> 
>> Thomas 'PointedEars' Lahn wrote:
>>> 5. Avoid the “outerHTML” property.
>>
>> Is there any particular reason besides outerHTML being non standardized
>> (yet)? 
> 
> Yes.

What is this reason?

>> Do the restrictions mentioned in the FAQ section "How do I
>> modify the content of the current page?"[1] apply to outerHTML as well?
> 
> Probably.
> 
>>  And do they still hold for recent IE versions wrt. innerHTML?
> 
> I do not know.  Which IE versions exactly do you consider “recent”?

At least IE 11, but even IE 9 (or even earlier?) might have brought
improvements.  (I'm quite deliberately omitting any specific JScript
version numbers here.)

FWIW, I quickly hacked together a simple test and put it on
<http://cmb.bplaced.net/innerhtml1.html>.  It seems that IE 8 still has
the mentioned issues regarding what is tested:

  * Replaces consecutive whitespace characters with a single space.
  * Changes (attribute values and) order of appearance.
  * Removes quotations around attribute values.

However, IE 11 passes these tests, and according to the emulation mode
even IE 9 does so.  Quite interestingly, Firefox 26.0 changes the order
of appearance of the table element's attributes (while Chrome 32.0 and
Opera 12.16 do not).

>> [1] <http://pointedears.de/scripts/faq/cljs/>
> 
> I may have been misunderstood with regard to referring to the FAQ for 
> comp.lang.javascript.  It is appropriate to use both the name of the section 
> and its URI to refer to it, although URIs containing section numbers should 
> be avoided because they cannot be guaranteed to continue to work, should the 
> FAQ be restructured.  In this case, the appropriate URI is
> <http://PointedEars.de/faq#updateContent>.  TIA.

No, you don't have been misunderstood (at least not by me).  Actually, I
wanted to post this URI, but failed to do so somehow.

-- 
Christoph M. Becker

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

#22664

Christoph Michael Becker <cmbecker69@arcor.de> wrote on 18 jan 2014 in 
comp.lang.javascript:

>>> Is there any particular reason besides outerHTML being non standardized
>>> (yet)? 
>> 
>> Yes.
> 
> What is this reason?

outerHTML [and innerHTML] are felt to return the source-script string,
while in moderne browsers they give the reconstructed string, reconstructed 
from the DOM. This may very well give different strings depending on the 
browser, and even more different strings as compared to the source-script 
string.

Applying textual conversions by Regex or otherwise is sure to be 
inconsistent.

I think it is much better to manipulate the DOM with the tools available to 
browser-javascript. However that will require some additional learning for 
some of us, including me.

Only debugging with alert(el.outerHTML); cannot hurt much, but DOM 
manipulation should be avoided at all cost with these methods. 

======================

myDiv.innerHTML = 'changed simple text string'; 
better:
myDiv.textContent = 'changed simple text string';
[even with older IEs??]

Something about topspeed node-clearing: 
<http://jsperf.com/innerhtml-vs-removechild/37>










-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#22665

Christoph Michael Becker wrote:

> Thomas 'PointedEars' Lahn wrote:
>> Christoph Michael Becker wrote:
>>> Thomas 'PointedEars' Lahn wrote:
>>>> 5. Avoid the “outerHTML” property.
>>>
>>> Is there any particular reason besides outerHTML being non standardized
>>> (yet)?
>> 
>> Yes.
> 
> What is this reason?

The same reason why using “innerHTML” should be avoided: In many cases it is 
unnecessary and less efficient to work with a serialization of the document 
(sub)tree instead of with the document (sub)tree itself.

In this case,

  /*
   * You can pass the property values as arguments instead,
   * but I will probably never remember the order correctly
   */
  var option = new Option();
  option.text = "foo";
  option.value = "bar";

  var options = select.options;
  options[options.length] = option;

would have been appropriate [HTMLSelectElement::add() and 
HTMLOptionsCollection::add() are not backwards-compatible].

<http://www.w3.org/TR/2013/CR-html5-20130806/forms.html#the-select-element>

Whereas, assuming the target “select” element had an ID or name of "baz", 
the reference value of “select” could have been retrieved via one of

  - el.form.elements["baz"];
  - document.evaluate(
      '../*[translate(local-name(), "SELCT", "selct") = "select"'
        + ' and (@id = "baz" or @name = "baz")]',
      el, null, …);
  - document.getElementById("baz");
  - el.parentNode.getElementsByTagName("select")[index];
  - document.getElementsByName("baz")[index].

Preferably in that order.

<http://www.w3.org/TR/2013/CR-html5-20130806/forms.html#dom-fae-form>
<http://www.w3.org/TR/2004/NOTE-DOM-Level-3-XPath-20040226/xpath.html#XPathEvaluator-evaluate>
<http://dom.spec.whatwg.org/#dom-nonelementparentnode-getelementbyid>
<http://dom.spec.whatwg.org/#dom-element-getelementsbytagname>
<http://www.w3.org/TR/2013/CR-html5-20130806/dom.html#dom-document-getelementsbyname>

>>> Do the restrictions mentioned in the FAQ section "How do I
>>> modify the content of the current page?"[1] apply to outerHTML as well?
>> 
>> Probably.
>> 
>>>  And do they still hold for recent IE versions wrt. innerHTML?
>> 
>> I do not know.  Which IE versions exactly do you consider “recent”?
> 
> At least IE 11, but even IE 9 (or even earlier?) might have brought
> improvements.  (I'm quite deliberately omitting any specific JScript
> version numbers here.)
> 
> FWIW, I quickly hacked together a simple test and put it on
> <http://cmb.bplaced.net/innerhtml1.html>.  It seems that IE 8 still has
> the mentioned issues regarding what is tested:
> 
>   * Replaces consecutive whitespace characters with a single space.
>   * Changes (attribute values and) order of appearance.
>   * Removes quotations around attribute values.

ACK.  Also, the FAQ entry is incomplete because it does not discuss in more 
detail the detrimental effects of assigning a value to the “innerHTML” 
property of certain element objects.
 
> However, IE 11 passes these tests, and according to the emulation mode
> even IE 9 does so.  Quite interestingly, Firefox 26.0 changes the order
> of appearance of the table element's attributes (while Chrome 32.0 and
> Opera 12.16 do not).

Yet another reason why working with serializations is error-prone.

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [standalone]

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

csiph-web