【JavaScript】HTML文件插入JavaScript函数

介绍

在HTML文件中插入JavaScript函数的方法如下:

1、在HTML文件中使用<script>标签来定义JavaScript函数,例如:

复制代码
<script>
function myFunction() {
  // 在这里编写JavaScript函数代码
}
</script>

2、在HTML文件中调用JavaScript函数,例如:

复制代码
<button onclick="myFunction()">点击这里</button>

这将在单击按钮时调用名为myFunction()的JavaScript函数。您还可以通过其他方式调用JavaScript函数,例如在页面加载时自动调用或在其他事件触发时调用。在使用JavaScript函数时,请确保将JavaScript代码放在<head><body>标签中,并确保在调用函数之前定义它们。

例子

下面是一个例子,展示如何使用JavaScript函数在HTML中插入表格:

html 复制代码
<html>
    <head>
        <title>表格1</title>
        <script type="text/javascript">
            function createTable()
            {
                var t = document.createElement('table');
                for (var i = 0; i < 20; i ++)
                {
                    var r = t.insertRow();
                    for (var j = 0; j < 5; j ++)
                    {
                        var c = r.insertCell();
                        c.innerHTML = i + ',' + j;
                    }
                }

                document.getElementById('parent').appendChild(t);
                t.setAttribute('border', 1);
            }
        </script>
    </head>

    <body>
        <div id="parent" style="border:1px solid black">
        </div>
        <script>
            createTable();
        </script>
    </body>
</html>

浏览器效果:

相关推荐
|晴 天|3 小时前
Vue 3 + TypeScript + Element Plus 博客系统开发总结与思考
前端·vue.js·typescript
猫3284 小时前
v-cloak
前端·javascript·vue.js
AC赳赳老秦4 小时前
OpenClaw二次开发实战:编写专属办公自动化技能,适配个性化需求
linux·javascript·人工智能·python·django·测试用例·openclaw
旷世奇才李先生4 小时前
Vue 3\+Vite\+Pinia实战:企业级前端项目架构设计
前端·javascript·vue.js
Ulyanov5 小时前
《PySide6 GUI开发指南:QML核心与实践》 第二篇:QML语法精要——构建声明式UI的基础
java·开发语言·javascript·python·ui·gui·雷达电子对抗系统仿真
聚美智数5 小时前
企业实际控制人查询-公司实控人查询
android·java·javascript
SoaringHeart6 小时前
Flutter进阶:用OverlayEntry 实现所有弹窗效果
前端·flutter
奇舞精选6 小时前
写 HTML 就能做视频?HeyGen 开源的这个工具有点意思
html·agent
IT_陈寒7 小时前
Vite静态资源加载把我坑惨了
前端·人工智能·后端
herinspace8 小时前
管家婆实用贴-如何分离和附加数据库
开发语言·前端·javascript·数据库·语音识别