Create a div from Javascript function (innerHTML)

Question

I want to call a function which creates divs headings and paragraphs inside my HTML code, I can't make the HTML appear though

Here is my JS function:

const about = () => {
    document.getElementById('about').innerHTML = '<div class="about"><h1>About</h1><div><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div>';
}

I have tried to do this:

<div class = "about-content" id = 'about'>

</div>

and it doesn't seem to be working.. do I need to call the function somewhere in my code?

Don't use the same name for a global function as the ID of an element. IDs automatically become global variables, and the names will conflict. — Barmar
– Barmar, Commented Sep 7, 2018 at 1:42

Smokey Dawson · Accepted Answer · 2018-09-07 01:35:20Z

2

Yes you need to call the function,

You can do this when the page loads like so..

document.addEventListener('DOMContentLoaded', function() {
    about();
}, false);

or you could use a setTimeout

window.onload = function() {
   setTimeout(() => {
       about();
   }, 1000);
}

or you could have it on a click event

html

<button id="about-select"></button>

javascript

const button = document.querySelector('#about-select');

button.addEventListener('click', () => {
   about();
});

or you could just do this

<button onclick="about()">Click me</button>

edited Sep 7, 2018 at 1:35

answered Sep 7, 2018 at 1:13

Smokey Dawson

9,29023 gold badges87 silver badges162 bronze badges

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

4 Comments

Alex Turner Over a year ago

Thankyou, I can get it to appear upon page load. Now I need to figure out how to call it only when a certain button is clicked. thanks

Smokey Dawson Over a year ago

Yeah so if you look at my last example, you can use an eventListener so when you click a button it will call the function I will write a full example

Alex Turner Over a year ago

That does work. However I have been advised that I could find a solution without making any changes to my .js file

Smokey Dawson Over a year ago

@AlexTurner please see my latest edit, this should answer your question

Poul Bak · Accepted Answer · 2018-09-07 01:14:19Z

1

Inside your script add something like this:

window.addEventListener('load', function()
{
    about();
}

That will call your function when the page has loaded.

answered Sep 7, 2018 at 1:14

Poul Bak

11k5 gold badges39 silver badges70 bronze badges

Comments

Ahmed Hammad · Accepted Answer · 2018-09-07 01:10:39Z

-1

Yes, you need to call the function.

Your function is ready to use but not called yet.

So, inside your JavaScript script use about(); to call your function.

answered Sep 7, 2018 at 1:10

Ahmed Hammad

3,1255 gold badges22 silver badges43 bronze badges

Collectives™ on Stack Overflow

Create a div from Javascript function (innerHTML)

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related