通过Javascript函数创建一个div(innerHTML)

时间:2018-09-07 01:07:36

标签: javascript innerhtml

我想调用一个在HTML代码中创建div标题和段落的函数,但是我无法使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>

似乎不起作用。我需要在代码中的某个地方调用该函数吗?

3 个答案:

答案 0 :(得分:2)

是的,您需要调用该函数,

您可以在页面加载时执行此操作。

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>

答案 1 :(得分:1)

在脚本内添加以下内容:

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

页面加载后将调用您的函数。

答案 2 :(得分:-1)

是的,您需要调用该函数。

您的函数可以使用了,但尚未调用。

因此,在JavaScript脚本中使用about();调用函数。