从 Javascript 函数创建一个 div (innerHTML)

Question

我想调用一个在我的 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>

它似乎不起作用..我需要在我的代码中的某处调用该函数吗？

Answer 1

是的，你需要调用函数。

您的函数已准备就绪，但尚未调用。

因此，在您的 JavaScript 脚本中使用 about(); 来调用您的函数。

Answer 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>

Answer 3

在您的脚本中添加如下内容：

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

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

从 Javascript 函数创建一个 div (innerHTML)

Create a div from Javascript function (innerHTML)

javascript

innerhtml