Adding content to a HTML page with Javascript

Question

Okay. So, I am trying to create a page which displays a bunch of notes I have stored on my computer. As I am only going to keep the page on the local-machine, I have thought of keeping these notes as JavaScript functions, in separate documents, which add the note to the page.

However, this has not worked as of yet, and I am struggling to create the effect I would like.

The problem lies, in my opinion, of adding the notes to the page before other script modifies them. At the moment, I am yet to be able to display a single note on the page, and I am receiving no errors.

It would be greatly appreciated if somebody could point out where I went wrong. I would like to be able to add as many notes as I like by simply adding another JavaScript document.

The HTML Document:

<head>
    <meta charset="utf-8" lang="en">
    <script src="text1.js"></script>
    <script>
        var colours = [
            "rgba(254, 224,198,0.6)",
            "rgba(254,240,201,0.6)",
            "rgba(180,238,180,0.6)",
            "rgba(141,238,238,0.6)",
            "rgba(85,152,198,0.6)"
        ];

        var x;

        function sectionSelect(){
            x = document.getElementsByTagName("section");
        }

        function colourBG(){
            for(var i=0; i<= (x.length - 1); i++){
                var z = Math.floor(Math.random() * colours.length);
                x[i].style.backgroundColor = colours[z];
            };
        }
    </script>
</head>
<body>

    <script>
        sectionSelect();
        colourBG();
    </script>
</body>

Inside of the text1.js document: (this is where I think the problem lies, yet I'm unsure)

(function(){
var content = `
<section>
    <h1>Links</h1>
    <p><a href="" target="_blank"></a></p> //There are just a bunch of links here
</section>
`;
document.body.insertAdjacentHTML('afterbegin', content); })

Any help would be greatly appreciated. Thanks

Matis Lepik · Accepted Answer · 2016-10-29 13:08:32Z

1

The problem with your text1.js file, is that it's trying to do an IIFE (immediately invoked function expression), but it's not actually invoking it. So you would have to add a () to the end of that script, like so:

(function(){
var content = `
<section>
    <h1>Links</h1>
    <p><a href="" target="_blank"></a></p> //There are just a bunch of links here
</section>
`;
document.body.insertAdjacentHTML('afterbegin', content); })()

Alternatively, you should be able to get rid of the IIFE altogether and just have the file consist of this:

var content = `
<section>
    <h1>Links</h1>
    <p><a href="" target="_blank"></a></p> //There are just a bunch of links here
</section>
`;
document.body.insertAdjacentHTML('afterbegin', content);

answered Oct 29, 2016 at 13:08

Matis Lepik

1,1622 gold badges10 silver badges19 bronze badges

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

2 Comments

user2717118 Over a year ago

Tried removing the IIFE, yet now I am getting an error, saying "document.body is null." How do I fix this?

Matis Lepik Over a year ago

@user2717118 that's because if your script is in the head element, it will execute before the DOM has loaded (document.body is not available yet). To solve this, put all your scripts that do DOM manipulation before the closing body tag (in this case, put all of the scripts there). There are also solutions like jQuery's $(document).ready, but those aren't really necessary.

Razia sultana · Accepted Answer · 2016-10-29 13:08:59Z

0

Try this

document.getElementById("parentID").appendChild(/*..your content created using DOM methods..*/)

or

document.getElementById("parentID").innerHTML+= "new content"

or

<script>
    for(var i=1; i<=3; i++) {
      alert("Rabbit "+i+" out of the hat!")
    }
  </script>

answered Oct 29, 2016 at 13:08

Razia sultana

2,2513 gold badges18 silver badges21 bronze badges

Collectives™ on Stack Overflow

Adding content to a HTML page with Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related