How do I use information from my javascript (const) to insert into my html?-CodePudding

Let's say I have this script:

const BusInfo = [
    {
        code: "B31",
        destination: "Toronto"
    },
    {
        code: "HJ1",
        destination: "Montreal"
    }
]

How would I be able to put that information in my html document? I cannot change the above script at all. I am having issue doing this, I have tried googling but there isn't much information on how to do that or I am just having trouble comprehending. Also, how would I be able to style this in css?

I have already called for the script in my index.html, but I am having trouble showing that information. One of the problems am having with is not being able to edit that script at all. I have to keep it like that.

CodePudding user response：

If you are trying to make some kind of project which will be using this kind of html manipulation a lot i would recommend you use a framework for that (react, vue, angular)

But if its just a one case scenario you can also do it with vanilla js using createElement:

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

Without more information on the code and what you are trying to achieve this is the best i can give you

CodePudding user response：

Let's say you have a paragraph: <p id="destination">Destination</p>

You could do this to change the content of the paragraph:

document.querySelector('#destination').textContent = BusInfo.destination;