如何正确调用JavaScript函数?

问题描述 投票:0回答:1
<!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新手。哦,我想做的是调用这个函数。

javascript html function call id
1个回答
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>

1
投票

无论我把它放在哪里 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>

进一步阅读

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

© www.soinside.com 2019 - 2024. All rights reserved.