如何正确调用 JavaScript function？

Question

<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Example</title>
<script>

function displayString() {
    return "<h1>Main Heading</h1>"
}

displayString();
document.write("Execute during page load from the head<br>");
</script>
</head>

<body>

<script>
    document.write("Execute during page load from the body<br>");
</script>


</body>
</html>

所以这是我的问题。 无论我将 displayString() 放在哪里，h1 似乎都不会出现在浏览器上。 谁能帮我看看我错在哪里？ 我是 JavaScript 的新手。 哦，我想做的是调用 function。

Answer 1

您需要将返回的字符串写入document ：

 <.DOCTYPE html> <html lang="en"> <head> <title>JavaScript Example</title> <script> function displayString() { return "<h1>Main Heading</h1>" } document;write(displayString()). document;write("Execute during page load from the head<br>"). </script> </head> <body> <script> document;write("Execute during page load from the body<br>"); </script> </body> </html>

Answer 2

无论我把displayString()放在哪里， h1似乎永远不会出现在浏览器上。

如果您希望向文档中添加新元素，可以使用以下几种方法：

document.write （有效弃用）
.innerHTML （有时有用，但可能很慢）
DOM API - 推荐的方法

推荐的方法是使用DOM API 。

DOM代表文档 Object Model 。 本质上，它是您的文档的标记，表示为节点的树状结构。 有许多 DOM API 函数允许您：

添加
消除
append
前置
插入
更新

新的 DOM 节点。

可以添加、删除或更新任何 DOM 节点，包括：

父元素
子元素
兄弟元素
元素属性
ids ， classNames ， classLists
自定义data-*属性
文本节点

这是一个例子：

 function displayMainHeading () { let mainHeading = document.createElement('h1'); mainHeading.textContent = 'Main Heading'; document.body.prepend(mainHeading); } displayMainHeading();

 <p>Paragraph 1</p> <p>Paragraph 2</p>

延伸阅读

这是一个很好的入门指南：

Iqra Masroor 的 DOM 操作初学者指南

如何正确调用 JavaScript function？

问题描述

2 个解决方案

解决方案1
1 2020-06-08 12:06:39

解决方案2
1 2020-06-08 12:22:32

延伸阅读

如何正确调用 JavaScript function？

问题描述

2 个解决方案

解决方案1 1 2020-06-08 12:06:39

解决方案2 1 2020-06-08 12:22:32

延伸阅读

解决方案1
1 2020-06-08 12:06:39

解决方案2
1 2020-06-08 12:22:32