JavaScript 学习之JS实现和输出

2025-11-05 02:57:29

1、<body> 中的 JavaScript

在本例中,JavaScript 会在页面加载时向 HTML 的 <body> 写文本:

<!DOCTYPE html>

<html>

<body>

JavaScript 能够直接写入 HTML 输出流中:

<script>

document.write("<h1>This is a heading</h1>");

document.write("This is a paragraph.");

</script>

您只能在 HTML 输出流中使用 <strong>document.write</strong>。

如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。

</body>

</html>

JavaScript 学习之JS实现和输出

2、<head> 中的 JavaScript 函数

<!DOCTYPE html>

<html>

<head>

<script>

function myFunction()

{

document.getElementById("demo").innerHTML="My First JavaScript Function";

}

</script>

</head>

<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph.

<button type="button" onclick="myFunction()">点击这里</button>

</body>

</html>

JavaScript 学习之JS实现和输出

JavaScript 学习之JS实现和输出

3、<body> 中的 JavaScript 函数

<!DOCTYPE html>

<html>

<body>

<h1>My First Web Page</h1>

<p id="demo">A Paragraph.

<button type="button" onclick="myFunction()">点击这里</button>

<script>

function myFunction()

{

document.getElementById("demo").innerHTML="My First JavaScript Function";

}

</script>

</body>

</html>

JavaScript 学习之JS实现和输出

JavaScript 学习之JS实现和输出

4、外部的 JavaScript

<!DOCTYPE html>

<html>

<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph.

<button type="button" onclick="myFunction()">点击这里</button>

<b>注宋截囊释:</b>myFunction 保存在名为 "myScript.js" 的外部文件中。

<script type="text/javascript" src="/js/myScript.js"></script>盲欠

</body>

</html>芬哄

JavaScript 学习之JS实现和输出

1、操作 HTML 元素

<!DOCTYPE html>

<html>

<body>

<h1>My First Web Page</h1>

<p id="demo">My First Paragraph.

<script>

document.getElementById("demo").innerHTML="My First JavaScript";

</script>

</body>

</html>

JavaScript 学习之JS实现和输出

2、写到文档输出

下面的例子直接把 元素写到 HTML 文档输出中:

<!DOCTYPE html>

<html>

<body>

<h1>My First Web Page</h1>

<script>

document.write("My First JavaScript");

</script>

</body>

</html>

JavaScript 学习之JS实现和输出

3、警告

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:

<!DOCTYPE html>

<html>

<body>

<h1>My First Web Page</h1>

My First Paragraph.

<button onclick="myFunction()">点击这里</button>

<script>

function myFunction()

{

document.write("糟糕!文档消失了。");

}

</script>

</body>

</html>

JavaScript 学习之JS实现和输出

JavaScript 学习之JS实现和输出

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢