Typescript HTML display

Question

I am new to typescript. I have a question of displaying html using typescript. Below is my HTML code:

<div itemprop="copy-paste-block">
  <ul>
    <li><span style="font-size:11pt;"><span style="font-family:Calibri,sans-serif;">ITS – signed support agreement</span></span>
      <ul style="list-style-type:circle;">
        <li><span style="font-size:11pt;"><span style="font-family:Calibri,sans-serif;">27 parts received to date.</span></span>
        </li>
        <li><span style="font-size:11pt;"><span style="font-family:Calibri,sans-serif;">Working larger structures package.</span></span>
        </li>
      </ul>
    </li>
    <li><span style="font-size:11pt;"><span style="font-family:Calibri,sans-serif;">GECAS </span></span>
      <ul style="list-style-type:circle;">
        <li><span style="font-size:11pt;"><span style="font-family:Calibri,sans-serif;">Working full ship set structures package.</span></span>
        </li>
      </ul>
    </li>
    <li><span style="font-size:11pt;"><span style="font-family:Calibri,sans-serif;">Skywest</span></span>
      <ul style="list-style-type:circle;">
        <li><span style="font-size:11pt;"><span style="font-family:Calibri,sans-serif;">Price rationalization presented to mgmt.</span></span>
        </li>
      </ul>
    </li>
    <li>United
      <ul style="list-style-type:circle;">
        <li><span style="font-size:11pt;"><span style="font-family:Calibri,sans-serif;">Single Radome oppty.</span></span>
        </li>
      </ul>
    </li>
  </ul>
</div>

And when I use

document.write(htmlcontent);

It displays correct as show here:

However, when I use

document.body.innerHTML = htmlcontent

The display was changed, missing some contents and changed some formats shown below

I wonder if this is what supposed to happen....and if there anything I should do to make body.innerHTML display correctly? Thanks.

This link didn't answer my question: When should one use .innerHTML and when document.write in JavaScript

This has nothing to do with TypeScript. TypeScript is compiled to JavaScript before being used by the browser. — Heretic Monkey, Sep 30 '19 at 19:29

randomusername · Accepted Answer · 2019-09-30T19:51:44.737

2

You do not want to set the the .innerHTML of the whole document body. Instead, just select a div with document.getElementById and set the .innerHTML property on that.

Furthermore, don't use document.write. It's old and dangerous. Just don't touch it.

<html>
  <head>
  ...
  </head>
<body>
  <div id="root-element"></div>
  <script>
  document.getElementById("root-element").innerHTML = htmlcontent
  </script>
</body>
</html>

edited Sep 30 '19 at 19:51

answered Sep 30 '19 at 19:27

randomusername

7,927
23
50

@HereticMonkey see my edit for an example on how to do it – randomusername Sep 30 '19 at 19:47
@HereticMonkey whoops, I'm so used to only seeing them in code it didn't click that the text was wrong XD – randomusername Sep 30 '19 at 19:52
No problem. I'm willing to forget it ever happened :). – Heretic Monkey Sep 30 '19 at 19:53
Thank you both for the input. but this didn't solve the issue: when it is using innerHTML, the little dot (bullet point) in front of each line disappeared....any thoughts? – Heisenberg Sep 30 '19 at 20:24
@Heisenberg I'd need more information because this should still be showing those little circles. Are you using React or something like that? – randomusername Sep 30 '19 at 20:31
@randomusername Thanks. I think it part of other pre-built script inside Power BI....I was making a power bi custom visual to display html....I reported this to Microsoft and wait to see them deny and ignore this bug they have. – Heisenberg Sep 30 '19 at 21:08

Typescript HTML display

1 Answers1