如何正确调用 JavaScript 函数？答案

【问题标题】：How do I call the JavaScript function properly?如何正确调用 JavaScript 函数？
【发布时间】：2020-09-27 09:29:05
【问题描述】：

<!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 新手。哦，我想做的是调用这个函数。

【问题讨论】：

哇，这个问题有两个人赞成..！！
是的，就好像有人要求投票一样，也许是他们认识的人或回答的人？虽然那会违反规则，所以，不，不能那样吗？！
你“正确地”调用了函数——你只是没有对函数的返回值做任何事情，例如在对 document.write 的调用中使用它以将其作为内容添加到文档中。

标签： javascript html function call

【解决方案1】：

需要将返回的String写入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>

【讨论】：

Don't use document.write

【解决方案2】：

无论我将displayString() 放在哪里，h1 似乎都不会显示在浏览器上。

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

document.write (effectively deprecated)
.innerHTML（有时有用，但可能很慢）
DOM API - 推荐的方法

推荐的方法是使用 DOM API。

DOM 代表文档对象模型。本质上，它是您的文档的标记，表示为节点的树状结构。有许多 DOM API 函数可让您：

添加
移除
追加
前置
插入
更新

新的 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>

进一步阅读

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

A Beginners Guide To DOM Manipulation by Iqra Masroor

【讨论】：