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
– Heretic Monkey, Commented Sep 30, 2019 at 19:29

randomusername · Accepted Answer · 2019-09-30 19:51:44Z

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, 2019 at 19:51

answered Sep 30, 2019 at 19:27

randomusername

8,15326 silver badges51 bronze badges

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

6 Comments

randomusername Over a year ago

@HereticMonkey see my edit for an example on how to do it

randomusername Over a year ago

@HereticMonkey whoops, I'm so used to only seeing them in code it didn't click that the text was wrong XD

Heretic Monkey Over a year ago

No problem. I'm willing to forget it ever happened :).

Heisenberg Over a year ago

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?

randomusername Over a year ago

@Heisenberg I'd need more information because this should still be showing those little circles. Are you using React or something like that?

|

Collectives™ on Stack Overflow

Typescript HTML display

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related