Style script output within html

Question

I have the following script inside html, but the output inside html is without style.

How can I best style the script output so as it fits within the existing html structure?

I thought this may be achieved by getting the output by id, but have not figured that out.

<script>
    var myArray = [
        "<ul><p>Alef</p><p>1</p>",
        "<ul><p>Bet</p><p>2</p>"
    ];

    var randomItem = myArray[Math.floor(Math.random()*myArray.length)];

    document.body.innerHTML += randomItem;
</script>

The HTML in your array is invalid. A <p> cannot be a child of a <ul>. Only a <li> can — j08691
– j08691, Commented Jun 7, 2022 at 16:54
Instead of setting innerHTML on the body, try creating a new element that you can then add styles to. developer.mozilla.org/en-US/docs/Web/API/Document/createElement — Scott
– Scott, Commented Jun 7, 2022 at 16:56

Scott · Accepted Answer · 2022-06-07 17:11:22Z

1

Instead of setting innerHTML on the body, try creating a new element that you can then add styles to, and then adding that element to the body.

const randomItemElement = document.createElement("div");
randomItemElement.innerHTML = randomItem;
randomItemElement.style.color = "blue";

document.body.appendChild(randomItemElement);

You can also create a CSS class and set that on your element instead of setting individual properties, e.g. randomItemElement.classList.add("myClass")

answered Jun 7, 2022 at 17:11

Scott

2722 silver badges11 bronze badges

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

2 Comments

Simon Ante Over a year ago

How would I specify 'max-width'? The dash seems to make problems.

Simon Ante Over a year ago

.style.maxWidth = "100px"; works

Collectives™ on Stack Overflow

Style script output within html

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related