时间戳

首页 > 解决方案 > 如何正确调用 JavaScript 函数？

javascript - 如何正确调用 JavaScript 函数？

问题描述

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

标签： javascripthtmlfunctioncall

解决方案

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

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

  • document.write（有效弃用）
  • .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>

延伸阅读

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

推荐阅读