Directly adding text into innerHTML without using innerText

Question

Is it possible to add string inside innerHTML without having to use innerText?

like this:

var sentence="<b>hello there</b>";

document.querySelector(".container").innerHTML='<span class="thing"></span>';
document.querySelector(".thing").innerText=sentence;

<!DOCTYPE html>
<html>

  <head></head>

  <body>
  <div class="container"></div>
 
  </body>

</html>

but without having to use innerText,
Maybe the code would look something like this:

var sentence="<b>hello there</b>";

document.querySelector(".container").innerHTML='<span class="thing">'+raw(sentence)+'</span>';

It's possible, but not a very good idea IMO. Your first approach is perfect, I thnk (except - use .textContent instead of the less-standard and weird .innerText) — CertainPerformance
– CertainPerformance, Commented Mar 6, 2021 at 22:34
@CertainPerformance innerText is a very useful property when it comes to preserving white-space and newlines. As such, the only "weird" thing about it is that it was never standardized. — connexo
– connexo, Commented Mar 6, 2021 at 22:40
@connexo He said he was thinking of something like raw(sentence) so I thought he meant he wanted to see the plain text as a result, not the HTML markup. @lemonface, is your first snippet producing the output you want? — CertainPerformance
– CertainPerformance, Commented Mar 6, 2021 at 22:44

CertainPerformance · Accepted Answer · 2021-03-06 22:37:44Z

2

I don't see anything seriously wrong with your current approach. If you want to avoid the repetition of creating an element with a particular class and then have to select it again right after you append it, you can consider creating an element instead of an HTML string:

var sentence="<b>hello there</b>";

document.querySelector(".container")
  .appendChild(document.createElement('span'))
  .textContent = sentence;

<div class="container"></div>

answered Mar 6, 2021 at 22:37

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

connexo Over a year ago

I'm assuming OP expects bold text to show up.

connexo Over a year ago

If your interpretation is correct, you can also use

document.querySelector(".container")   .appendChild(document.createElement('span')).appendChild(document.createTextNode(sentence))

.

cak3_lover Over a year ago

@CertainPerformance thank you! This is exactly what I was looking for! Just for a reference to the future travelers who might stumble upon this Q, you can first create a temp element and add style and/or class to it like this jsfiddle.net/t93v7sa8/1

Collectives™ on Stack Overflow

Directly adding text into innerHTML without using innerText

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related