How to append html like plain text to page

Question

I have <li> in DOM, want to insert string with some HTML like plain text. But it appends with html. Sorry for bad English.

Example

<li></li> - empty list element

I want to append string <script>alert(1)</script> to li like text, without execute.

You want to add javascript to the HTML but don't want it to get executed? — Saransh Kataria, Sep 14 '18 at 05:36
@SaranshKataria i want to append it like plain text, to have — QuodNephilim, Sep 14 '18 at 05:37
Use HTML entities: `<script>` and so on… Script elements inserted using *innerHTML* are not executed. — RobG, Sep 14 '18 at 05:37
Do you mean you have a string that contains `HTML` that you want to output as plain text? — NewToJS, Sep 14 '18 at 05:38
@QuodNephilim—which is exactly what `<script>` will produce if inserted as HTML. — RobG, Sep 14 '18 at 05:42
Probably a duplicate of [*show HTML as plain text*](https://stackoverflow.com/questions/16717513/show-html-as-plain-text) or [*How to insert HTML as Text*](https://stackoverflow.com/questions/5617260/how-to-insert-html-as-text). — RobG, Sep 14 '18 at 05:46
@RobG you are right, but this question is different from them. — ahsan ayub, Sep 14 '18 at 05:50
@ahsanayub—given that the accepted answer is identical to one of the answers at [*How to insert HTML as Text*](https://stackoverflow.com/a/42403369/257182), I think it's a duplicate. — RobG, Sep 14 '18 at 08:28

Angelos Chalaris · Accepted Answer · 2018-09-14T05:49:00.067

4

You can use innerText, like so:

document.querySelector('li').innerText += '<script>alert(1)<\/script>';

<li></li>

However, remember that you will have to escape certain characters.

edited Sep 14 '18 at 05:49

answered Sep 14 '18 at 05:37

Angelos Chalaris

It's error in your snippet. – QuodNephilim Sep 14 '18 at 05:38
@QuodNephilim Indeed, I fixed it, refresh to see it. – Angelos Chalaris Sep 14 '18 at 05:38
Best answer, thanks. Maybe you know how to concat it? – QuodNephilim Sep 14 '18 at 05:40
@QuodNephilim What you want to concatenate? – ahsan ayub Sep 14 '18 at 05:48
2

basically `document.querySelector('li').innerText = document.querySelector('li').innerText + ' – Steve Kirsch Sep 14 '18 at 05:48
1

@SteveKirsch `+=` would do the job as well, updated, thanks for the heads up! – Angelos Chalaris Sep 14 '18 at 05:49
Do not use innerText here. What you want is textContent. Since you are *getting* (`+=`) innerText will trigger a reflow + will return only the visible part of the text if overflow. – Kaiido Sep 14 '18 at 05:51
@Kaiido can you explain this point a bit? – ahsan ayub Sep 14 '18 at 05:52
2

@ahsanayub Didn't I already? innerText is CSS aware, and at getting returns only the visible part of the element's textContent. So when you call its getter, the browser will have to perform a reflow (so it knows what's the visible textContent at this time is). And in case the node has some hidden textContent, you'll miss this hidden part. – Kaiido Sep 14 '18 at 05:55

1 Answers1