Создать div из функции Javascript (innerHTML)

Question

Я хочу вызвать функцию, которая создает div-заголовки и абзацы внутри моего HTML-кода, но я не могу заставить HTML отображаться

Вот моя функция JS:

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>';
}

Я пытался сделать это:

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

</div>

и, похоже, он не работает .. мне нужно вызывать функцию где-нибудь в моем коде?

Answer 1

Да, вам нужно вызвать функцию,

Вы можете сделать это, когда страница загружается так ..

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

или вы можете использовать setTimeout

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

или вы можете использовать его для события клика

HTML

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

Javascript

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

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

или вы могли бы просто сделать это

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

Answer 2

Внутри вашего скрипта добавьте что-то вроде этого:

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

Это вызовет вашу функцию после загрузки страницы.

Answer 3

Да, вам нужно вызвать функцию.

Ваша функция готова к использованию, но еще не вызвана.

Итак, внутри вашего скрипта JavaScript используйте about(); для вызова вашей функции.