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

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

<span> text replacement ??

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

Contents

  <span> text replacement ?? "Mel Smith" <med_cutout_syntel@aol.com> - 2013-02-02 13:41 -0700
    Re: <span> text replacement ?? "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2013-02-02 23:10 +0200
      Re: <span> text replacement ?? Andrew Poulos <ap_prog@hotmail.com> - 2013-02-03 08:58 +1100
        Re: <span> text replacement ?? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2013-02-03 00:51 +0100
          Re: <span> text replacement ?? Jim T. <x@y.z> - 2013-02-03 12:03 -0500
            Re: <span> text replacement ?? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2013-02-04 01:47 +0100
          Re: <span> text replacement ?? Eric Bednarz <bednarz@fahr-zur-hoelle.org> - 2013-02-04 22:40 +0100
        Re: <span> text replacement ?? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-02-03 02:03 +0100
          Re: <span> text replacement ?? "Mel Smith" <med_cutout_syntel@aol.com> - 2013-02-02 18:28 -0700
            Re: <span> text replacement ?? "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2013-02-03 07:49 +0200
              Re: <span> text replacement ?? Andrew Poulos <ap_prog@hotmail.com> - 2013-02-03 21:08 +1100
      Re: <span> text replacement ?? "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2013-02-03 07:45 +0200
        Re: <span> text replacement ?? Andrew Poulos <ap_prog@hotmail.com> - 2013-02-03 21:11 +1100
          Re: <span> text replacement ?? "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2013-02-03 15:38 +0200
            Re: <span> text replacement ?? Andrew Poulos <ap_prog@hotmail.com> - 2013-02-04 06:56 +1100
              Re: <span> text replacement ?? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-02-03 22:35 +0100
                Re: <span> text replacement ?? Christoph Becker <cmbecker69@gmx.de> - 2013-02-04 02:08 +0100
                  Re: <span> text replacement ?? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-02-04 02:35 +0100
            Re: <span> text replacement ?? Eric Bednarz <bednarz@fahr-zur-hoelle.org> - 2013-02-04 22:54 +0100
              Re: <span> text replacement ?? "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2013-02-05 00:12 +0200
                Re: <span> text replacement ?? Andrew Poulos <ap_prog@hotmail.com> - 2013-02-06 11:42 +1100
                  Re: <span> text replacement ?? "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2013-02-06 07:50 +0200
                    Re: <span> text replacement ?? Andrew Poulos <ap_prog@hotmail.com> - 2013-02-06 17:36 +1100
                Re: <span> text replacement ?? Eric Bednarz <bednarz@fahr-zur-hoelle.org> - 2013-02-09 00:46 +0100
        Re: <span> text replacement ?? Christoph Becker <cmbecker69@gmx.de> - 2013-02-04 02:21 +0100

Page 1 of 2  [1] 2  Next page →

#18316 — <span> text replacement ??

Hi:

    I wish to change the textual content of the following <span> element.

    <span id="ierrmsg">This is original error msg</span>

    I have tried document.getElementById("ierrmsg").value ="new error msg" ;

    .. and I've also tried to do .nodeValue,  .text, etc.

But nothing seemed to work --   and my mind is 'blanker' than ever :(

Help please ??

Thank you.

-- 
Mel Smith

[toc] | [next] | [standalone]

#18317

2013-02-02 22:41, Mel Smith wrote:

>      I wish to change the textual content of the following <span> element.
>
>      <span id="ierrmsg">This is original error msg</span>
>
>      I have tried document.getElementById("ierrmsg").value ="new error msg" ;
>
>      .. and I've also tried to do .nodeValue,  .text, etc.

Normal elements don’t have such properties. The practical choice is the 
innerHTML property:
document.getElementById("ierrmsg").innerHTML = "new error msg" ;

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

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

#18318

On 3/02/2013 8:10 AM, Jukka K. Korpela wrote:
> 2013-02-02 22:41, Mel Smith wrote:
>
>>      I wish to change the textual content of the following <span>
>> element.
>>
>>      <span id="ierrmsg">This is original error msg</span>
>>
>>      I have tried document.getElementById("ierrmsg").value ="new error
>> msg" ;
>>
>>      .. and I've also tried to do .nodeValue,  .text, etc.
>
> Normal elements don’t have such properties. The practical choice is the
> innerHTML property:
> document.getElementById("ierrmsg").innerHTML = "new msg" ;

or

document.getElementById("ierrmsg").firstChild.nodeValue = "new msg";

should also work. Of course the element would have to exist before you 
can apply any change to it.

Andrew Poulos

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

#18319

Andrew Poulos wrote on 02 feb 2013 in comp.lang.javascript:

> On 3/02/2013 8:10 AM, Jukka K. Korpela wrote:
>> 2013-02-02 22:41, Mel Smith wrote:
>>
>>>      I wish to change the textual content of the following <span>
>>> element.
>>>
>>>      <span id="ierrmsg">This is original error msg</span>
>>>
>>>      I have tried document.getElementById("ierrmsg").value ="new
>>>      error 
>>> msg" ;
>>>
>>>      .. and I've also tried to do .nodeValue,  .text, etc.
>>
>> Normal elements donƒ Tt have such properties. The practical choice is
>> the innerHTML property:
>> document.getElementById("ierrmsg").innerHTML = "new msg" ;
> 
> or
> 
> document.getElementById("ierrmsg").firstChild.nodeValue = "new msg";
> 
> should also work. Of course the element would have to exist before you
> can apply any change to it.

If you have just 2 messages, always one on display,
don't mess with innerHTML if the content is complex:

<span id="m1">This is original error msg</span>
<span id="m2" style='display:none;'>New msg</span>

<div onclick="swapDisplay('m1','m2');">toggle</div>

<script type='text/javascript'>

function swapDisplay(a,b) {
  var temp = gbiSty(a).display != 'none';
  gbiSty(a).display = (temp) ? 'none' : 'inline';
  gbiSty(b).display = (temp) ? 'inline' : 'none';
};

function gbiSty(x) {
  return document.getElementById(x).style;
};

</script>


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

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

#18328

On Sun, 03 Feb 2013 00:51:07 +0100, "Evertjan."
<exxjxw.hannivoort@inter.nl.net> wrote:

>Andrew Poulos wrote on 02 feb 2013 in comp.lang.javascript:
>
>> On 3/02/2013 8:10 AM, Jukka K. Korpela wrote:
>>> 2013-02-02 22:41, Mel Smith wrote:
>>>
>>>>      I wish to change the textual content of the following <span>
>>>> element.
>>>>
>>>>      <span id="ierrmsg">This is original error msg</span>
>>>>
>>>>      I have tried document.getElementById("ierrmsg").value ="new
>>>>      error 
>>>> msg" ;
>>>>
>>>>      .. and I've also tried to do .nodeValue,  .text, etc.
>>>
>>> Normal elements donƒ Tt have such properties. The practical choice is
>>> the innerHTML property:
>>> document.getElementById("ierrmsg").innerHTML = "new msg" ;
>> 
>> or
>> 
>> document.getElementById("ierrmsg").firstChild.nodeValue = "new msg";
>> 
>> should also work. Of course the element would have to exist before you
>> can apply any change to it.
>
>If you have just 2 messages, always one on display,
>don't mess with innerHTML if the content is complex:

What do you mean? I use innerHTML heavily with very complex content
and have never had an issue with any browser going back to IE6.

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

#18333

Jim T. wrote on 03 feb 2013 in comp.lang.javascript:

>>If you have just 2 messages, always one on display,
>>don't mess with innerHTML if the content is complex:
> 
> What do you mean? I use innerHTML heavily with very complex content
> and have never had an issue with any browser going back to IE6.

Two reasons:

1
Using innerHTML for part of a table is asking for trouble.

2
The replacement as a string is not easily written,
if the html is complex.

3
As the string builds the dom dynamicly, 
using dom-commands would be preferable.

That's counting, eh?

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

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

#18341

"Evertjan." <exxjxw.hannivoort@inter.nl.net> writes:

> <span id="m1">This is original error msg</span>
> <span id="m2" style='display:none;'>New msg</span>
>
> <div onclick="swapDisplay('m1','m2');">toggle</div>

+1 for graceless degradation.

> function swapDisplay(a,b) {
>   var temp = gbiSty(a).display != 'none';
>   gbiSty(a).display = (temp) ? 'none' : 'inline';
>   gbiSty(b).display = (temp) ? 'inline' : 'none';
> };
>
> function gbiSty(x) {
>   return document.getElementById(x).style;
> };

There *must* be a more inefficient way to do this, but I can't come up
with one at this time of the day.

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

#18321

Andrew Poulos wrote:

> On 3/02/2013 8:10 AM, Jukka K. Korpela wrote:
>> 2013-02-02 22:41, Mel Smith wrote:
>>>      I wish to change the textual content of the following <span>
>>> element.
>>>
>>>      <span id="ierrmsg">This is original error msg</span>
>>>
>>>      I have tried document.getElementById("ierrmsg").value ="new error
>>> msg" ;
>>>
>>>      .. and I've also tried to do .nodeValue,  .text, etc.
>>
>> Normal elements don’t have such properties.

Nonsense.

>> The practical choice is the innerHTML property:
>> document.getElementById("ierrmsg").innerHTML = "new msg" ;
> 
> or
> 
> document.getElementById("ierrmsg").firstChild.nodeValue = "new msg";
> 
> should also work. Of course the element would have to exist before you
> can apply any change to it.

Neither the “innerHTML” property nor the “nodeValue” property of the first 
text child node are usually equivalent to the *text* content of the 
corresponding element.  Per W3C DOM Level 3 Core, all elements have a 
“textContent” property that can be read from and assigned to.

  document.getElementById("ierrmsg").textContent = "new msg";

It is supported by many DOM implementations, but not MSHTML < 9.  For the 
latter, you need to remove all child nodes and create a new text child node:

  if (typeof el.textContent != "undefined")
  {
    el.textContent = text;
  }
  else
  {
    while (el.lastChild) el.removeChild(el.lastChild);
    el.appendChild(document.createTextNode(text));
  }

See also jsx.dom.setTextContent().

An assignment to the “innerHTML” property is not equivalent to that because 
there the value right-hand side will be parsed, and the property is not 
available in XML mode.

<http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-textContent>
<https://developer.mozilla.org/en-US/docs/DOM/Node.textContent>
<http://msdn.microsoft.com/en-us/library/ff974773.aspx>

-- 
PointedEars

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

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

#18322

Jukka, Andrew, Evertjan, and Thomas:

    Thank you all for your responses.  Will try them out later tonite or 
tomorrow

    (btw, I *should have* thought to try out 'innerHTML' because I've used 
it before many times, but *this* time I didn't think to try it.)

    I, of course, would have never come up with Thomas'  solution, but I'll 
give *it* a try also (fearfully).

Thanks to you all for your solutions !

-Mel Smith
Mesa, Arizona

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

#18324

2013-02-03 3:28, Mel Smith wrote:

>      I, of course, would have never come up with Thomas'  solution, but I'll
> give *it*  a try also (fearfully).

That will not be just waste of time; the pointless complexity of the 
contrived approach to a trivial problem means that you will make 
mistakes in trying to implement it.

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

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

#18325

On 3/02/2013 4:49 PM, Jukka K. Korpela wrote:
> 2013-02-03 3:28, Mel Smith wrote:
>
>>      I, of course, would have never come up with Thomas' solution,
>> but I'll
>> give *it*  a try also (fearfully).
>
> That will not be just waste of time; the pointless complexity of the
> contrived approach to a trivial problem means that you will make
> mistakes in trying to implement it.

You shouldn't depend on a thesaurus.

Thomas' solution involves simply setting textContent with a fall back if 
textContent is not available.

Andrew Poulos

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

#18323

2013-02-02 23:10, Jukka K. Korpela wrote:

> The practical choice is the
> innerHTML property:

Oh, I should probably have warned that there will be a long rant by 
someone who wants to be a FAQ maintainer but cannot answer even a 
simplest question, like this, in a practical way.

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

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

#18326

On 3/02/2013 4:45 PM, Jukka K. Korpela wrote:
> 2013-02-02 23:10, Jukka K. Korpela wrote:
>
>> The practical choice is the
>> innerHTML property:
>
> Oh, I should probably have warned that there will be a long rant by
> someone who wants to be a FAQ maintainer but cannot answer even a
> simplest question, like this, in a practical way.

Its unfortunate that PE didn't post the answer you wanted to see but I 
notice that you haven't posted an answer.

Andrew Poulos

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

#18327

2013-02-03 12:11, Andrew Poulos wrote:

> Its unfortunate that PE didn't post the answer you wanted to see but I
> notice that you haven't posted an answer.

Which part of my text 'The practical choice is the innerHTML property:
document.getElementById("ierrmsg").innerHTML = "new error msg" ;' did 
you fail to notice? It was even quoted in the Pointless Troll's message.

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

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

#18329

On 4/02/2013 12:38 AM, Jukka K. Korpela wrote:
> 2013-02-03 12:11, Andrew Poulos wrote:
>
>> Its unfortunate that PE didn't post the answer you wanted to see but I
>> notice that you haven't posted an answer.
>
> Which part of my text 'The practical choice is the innerHTML property:
> document.getElementById("ierrmsg").innerHTML = "new error msg" ;' did
> you fail to notice? It was even quoted in the Pointless Troll's message.

My bad. I was reading your follow up post and didn't realise that the 
the remnant quote in the clipped post was yours.

Andrew Poulos

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

#18330

Andrew Poulos wrote:

> On 4/02/2013 12:38 AM, Jukka K. Korpela wrote:
>> 2013-02-03 12:11, Andrew Poulos wrote:
>>> Its unfortunate that PE didn't post the answer you wanted to see but I
>>> notice that you haven't posted an answer.
>>
>> Which part of my text 'The practical choice is the innerHTML property:
>> document.getElementById("ierrmsg").innerHTML = "new error msg" ;' did
>> you fail to notice? It was even quoted in the Pointless Troll's message.
> 
> My bad. I was reading your follow up post and didn't realise that the
> the remnant quote in the clipped post was yours.

But, as I said, it is incorrect to call the proprietary “innerHTML” property 
“the practical choice”; that is the result of short-sighted reasoning as the 
OP explicitly wanted to change the *text content* of the element.  Compare 
the result of

  el.textContent = "<strong>foo &amp; bar</strong>";

with that of

  el.innerHTML = "<strong>foo &amp; bar</strong>";

-- 
PointedEars

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

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

#18335

Thomas 'PointedEars' Lahn wrote:

> Compare 
> the result of
> 
>   el.textContent = "<strong>foo &amp; bar</strong>";
> 
> with that of
> 
>   el.innerHTML = "<strong>foo &amp; bar</strong>";

Or even

    el.textContent = "<g>";

vs.

    el.innerHTML = "<g>";

-- 
Christoph M. Becker

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

#18337

Christoph Becker wrote:

> Thomas 'PointedEars' Lahn wrote:
>> Compare the result of
>> 
>>   el.textContent = "<strong>foo &amp; bar</strong>";
>> 
>> with that of
>> 
>>   el.innerHTML = "<strong>foo &amp; bar</strong>";
> 
> Or even
> 
>     el.textContent = "<g>";
> 
> vs.
> 
>     el.innerHTML = "<g>";

Indeed, blindly assigning to the “innerHTML” property is particularly 
problematic where the parser implementation is not stable, allows for 
proprietary extensions, or fragments from other markup languages can be 
embedded.

“g” is the name of an SVG element type [1], and a plain “<g>” tag will be 
parsed into an HTMLUnknownElement node by an HTML5-compliant parser.  The 
same parser will parse it into an SVGGElement node when it is located within 
“<svg>…</svg>”.

    [It is not possible to accidentally insert HTML elements or to insert
     SVG elements in an SVG document that way: the corresponding element
     objects do not have an “innerHTML” property.  Assigning to the
     “innerHTML” property of an SVG element object will either fail with a
     runtime error or create that String property on that host object,
     having no other effect.]

Tested in Chromium “22.0.1229.94 Built on Debian wheezy/sid, running on 
Debian 7.0 (161065)”.

[1] <http://www.w3.org/TR/SVG/struct.html#GElement>

-- 
PointedEars

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

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

#18342

"Jukka K. Korpela" <jkorpela@cs.tut.fi> writes:

> [...] 'The practical choice is the innerHTML property: [...]

With the exception of quarterly management blurbs, I strongly disagree
with using 'practical' as a synonym for 'bad'.

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

#18343

2013-02-04 23:54, Eric Bednarz wrote:

> "Jukka K. Korpela" <jkorpela@cs.tut.fi> writes:
>
>> [...] 'The practical choice is the innerHTML property: [...]
>
> With the exception of quarterly management blurbs, I strongly disagree
> with using 'practical' as a synonym for 'bad'.

In this case, "practical" means something that actually solves the 
problem presented, instead of creating an amorphous collection of new 
problems or presenting pointless theoretical rants about problems that 
were not asked about.

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

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

Page 1 of 2  [1] 2  Next page →

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

csiph-web