replacement for .innerHTML

@JMRKERMay 04.2020

Is there a replacement for .innerHTML() that does not strip the HTML codes when displayed?
If I use .createElement() followed by elem.createTextNode() or elem.textContent=
that includes a unicode character, only the actual code is displayed, not the desired character.

to post a comment

JavaScript

5 Comments(s) _↴

@cootheadMay 04.2020 — #Hi there JMRKER,

you need to use **Unicode**

Here is a basic example...

``<i>
 </i>&lt;!DOCTYPE HTML&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 
 &lt;meta charset="utf-8"&gt;
 &lt;meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"&gt;
 
 &lt;title&gt;untitled document&lt;/title&gt;
 
 &lt;!--&lt;link rel="stylesheet" href="screen.css" media="screen"&gt;--&gt;
 
 &lt;style media="screen"&gt;
 
 body {
 background-color: #f0f0f0;
 font: normal 1em / 150% sans-serif;
 }
 
 #container {
 text-align:center;
 }
 
 #container  span {
 font-size: 2em;
 vertical-align: middle;
 }
 
 h1 {
 font-size: 1.5em;
 color: #444;
 text-transform: capitalize;
 text-align: center; 
 }
 
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;h1&gt;test&lt;/h1&gt;
 
 &lt;div id="container"&gt;
 This is a vulgar fraction -
 &lt;/div&gt; 
 
 &lt;script&gt;
 ( function( d ) {
 'use strict';
 var el = d.createElement('span');
 el.appendChild(d.createTextNode('  u00be'));
 d.getElementById('container').appendChild(el)
 } ( document ) );
 &lt;/script&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;<i>
 </i>``

Check out this site...

https://unicode-table.com/en/#control-character

_coothead_

@JMRKERauthorMay 05.2020 — #Thanks 'Coothead'. I had tried to insert the unicodes directly into the element as text.

I had not thought of using another element in-line with the currently displayed letters.

I had tried something along these lines:

var el = d.createElement('pre');

el.appendChild(d.createTextNode('A line of text containing: u00be'));

which does not display the desired results.

A bit more troublesome to write the extra element, but it does work for my needs

and I don't need the effect very often.

@JMRKERauthorMay 05.2020 — #I've researched and experimented further and found an easier way

to display the Unicode and HTML entities in elements

without using .innerHTML= and extra HTML tags. Use the format uXXXX

Here is an example using 4 different element displays.

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;title&gt; Unicode Test Page &lt;/title&gt;<br/>
 &lt;meta charset="UTF-8"&gt;<br/>
 &lt;meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/&gt;<br/>
 &lt;!-- From: <URL url="https://stackoverflow.com/questions/61615640/inserting-value-with-label-using-innerhtml#61615640">https://stackoverflow.com/questions/61615640/inserting-value-with-label-using-innerhtml#61615640</URL> --&gt;
 
 &lt;style&gt;<br/>
 .sbs { float: left; }<br/>
 .sbs &gt; pre,<br/>
 .sbs &gt; div { margin: 2em; }
 
 .tile { width: 9em; border: 1px solid red; font-size: 1.75em; }<br/>
 .dPRE {white-space: pre-wrap; }<br/>
 &lt;/style&gt;<br/>
 &lt;/head&gt;&lt;body&gt;<br/>
 &lt;a href="<URL url="https://unicode-table.com/en/sets/arrow-symbols/">https://unicode-table.com/en/sets/arrow-symbols/</URL>" target="_blank"&gt;Unicodes&lt;/a&gt;<br/>
 &lt;hr&gt;<br/>
 &lt;div class="sbs"&gt;<br/>
 &lt;h1&gt;&amp;lt;pre&amp;gt; elements&lt;/h1&gt;<br/>
 &lt;pre class="tile dPRE" id="p0"&gt;&lt;/pre&gt;<br/>
 &lt;pre class="tile dPRE" id="p1"&gt;&lt;/pre&gt;<br/>
 &lt;pre class="tile dPRE" id="p2"&gt;&lt;/pre&gt;<br/>
 &lt;pre class="tile dPRE" id="p3"&gt;&lt;/pre&gt;<br/>
 &lt;/div&gt;
 
 &lt;div class="sbs"&gt;<br/>
 &lt;h1&gt;&amp;lt;div&amp;gt; elements&lt;/h1&gt;<br/>
 &lt;div class="tile" id="d0"&gt;&lt;/div&gt;<br/>
 &lt;div class="tile" id="d1"&gt;&lt;/div&gt;<br/>
 &lt;div class="tile" id="d2"&gt;&lt;/div&gt;<br/>
 &lt;div class="tile" id="d3"&gt;&lt;/div&gt;<br/>
 &lt;/div&gt;
 
 &lt;script type="text/javascript"&gt;<br/>
 console.clear();
 
 (function (doc) { <br/>
 var pointStart = "12",  pointEnd = "40", d = document;
 
 // different symbols for testing<br/>
 //  var s='u2660', c='u2663', h='u2665', d='u2666';<br/>
 //  var s='u002b', c='u2212', h='u00d7', d='u00f7';<br/>
 var s='u2295', c='u2296', h='u2297', d='u2298';
 
 function preCode( ) {<br/>
 doc.getElementById("p0").innerHTML<br/>
 = <C>

Friends invited u2192 ${pointStart} / u21d2 ${pointEnd} RSVP ${s}

</C>;      // poor (uses innerHTML)<br/>
 doc.getElementById("p1").textContent<br/>
 = <C>

Friends invited &#x2192 ${pointStart} / &#x21d2 ${pointEnd} RSVP ੧

</C>; // NFG (Not Fully Good)
 
 <i>    </i><CODE>doc.getElementById("p2").textContent
 <i>    </i>  = 'Friends invited u2192 '+pointStart+' / u21d2 '+pointEnd+' RSVP '+h;   // OK (mixed)
 <i>    </i>doc.getElementById("p3").textContent
 <i>    </i>  =

Friends invited u2192 ${pointStart} / u21d2 ${pointEnd} RSVP ${d}

;   // best (templates)</CODE>
 }
 
 function divCode( ) {<br/>
 doc.getElementById("d0").innerHTML<br/>
 = <C>

Friends invited u2192 ${pointStart} / u21d2 ${pointEnd} RSVP ${s}

</C>;      // poor<br/>
 doc.getElementById("d1").textContent<br/>
 = <C>

Friends invited &#x2192 ${pointStart} / &#x21d2 ${pointEnd} RSVP ੧

</C>; // NFG
 
 <i>    </i><CODE>doc.getElementById("d2").textContent
 <i>    </i>  = 'Friends invited u2192 '+pointStart+' / u21d2 '+pointEnd+' RSVP '+h;   // OK
 <i>    </i>doc.getElementById("d3").textContent
 <i>    </i>  =

Friends invited u2192 ${pointStart} / u21d2 ${pointEnd} RSVP ${d}

;   // best</CODE>
 }
 
 // TEST SECTION<br/>
 preCode();<br/>
 divCode();<br/>
 })(document);<br/>
 &lt;/script&gt;
 
 &lt;/body&gt;&lt;/html&gt;<br/>

Works for me while using .textContent statements :)

@cootheadMay 05.2020 — #Hi there @JMRKER ,

works OK for me with either ``innerHTML`</C> or <C>` textContent`

</C> :D
 
 <CODE>

<i>
 </i>&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"&gt;
 
 &lt;title&gt; Unicode Test Page&lt;/title&gt;
 
 &lt;style media="screen"&gt;
 .form-group pre { 
 width: 14em; 
 white-space: pre-wrap; 
 border: 1px solid #f00; 
 font-size: 1.75em;
 }
 .form-group ~ div {
 width: 14em; 
 border: 1px solid #000;
 font-family: monospace;
 font-size: 1.75em;
 }
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;h1&gt; test&lt;/h1&gt;
 
 &lt;a href="https://unicode-table.com/en/sets/arrow-symbols/"&gt;Unicodes&lt;/a&gt;
 
 &lt;h2&gt;innerHTML and textContent&lt;/h2&gt;
 
 &lt;div class="form-group"&gt;
 &lt;pre id="points0"&gt;&lt;/pre&gt;
 &lt;pre id="points1"&gt;&lt;/pre&gt;
 &lt;pre id="points2"&gt;&lt;/pre&gt;
 &lt;pre id="points3"&gt;&lt;/pre&gt;
 &lt;/div&gt;
 
 &lt;h2&gt;Element.createTextNode&lt;/h2&gt;
 
 &lt;div id="foo"&gt;&lt;/div&gt;
 
 &lt;script&gt;
 'use strict';
 
 ( function( d ) {
 
 var pointStart = 12, 
 pointEnd = 40,
 s = 'u2295', c = 'u2296', 
 h =' u2297', e = 'u2298';
 
 
 d.getElementById("points0").innerHTML =

Friends invited u2192 ${pointStart} / u21d2 ${pointEnd} RSVP ${s}

; 
 
 d.getElementById("points1").innerHTML =

Friends invited → ${pointStart} / ⇒ ${pointEnd} RSVP ♣

; 
 
 d.getElementById("points2").textContent = 
 'Friends invited u2192 '+pointStart+' / u21d2 '+pointEnd+' RSVP '+h; 
 
 d.getElementById("points3").textContent =

Friends invited u2192 ${pointStart} / u21d2 ${pointEnd} RSVP ${e}

; 
 d.getElementById('foo').appendChild(
 d.createTextNode(
 'Friends invited u2192 ' + pointStart + ' / u21d2 ' + pointEnd + ' RSVP ' + e )); 
 } ( document ) );
 &lt;/script&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;<i>
 </i>

</CODE>
 Personally, I prefer to use  the<C>

`create.TextNode()`` method.

I would suggest that you get @deathshadow's opinion on this. ;)

_coothead_

@JMRKERauthorMay 06.2020 — #Thanks again.

I see your preference and it saves a bit of extra typing to create the same effect

(especially if it were put into a common function design). :)

I had thought the elem.textContent form did the same thing as d.createTextNode()

but I guess if that were true then there would have been no reason to define the latter command.

Also in #JavaScript _↴

Image dropdown not working in Mozilla:why?Help with DHTML Form Effects How do I make a menu that slides down on mouseover.

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This

replacement for .innerHTML

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

replacement for .innerHTML

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴