【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>

浏览器效果:

相关推荐
Apifox3 分钟前
Apifox 11 月更新|AI 生成测试用例能力持续升级、JSON Body 自动补全、支持为响应组件添加描述和 Header
前端·后端·测试
木易士心3 分钟前
深入剖析:按下 F5 后,浏览器前端究竟发生了什么?
前端·javascript
在掘金801105 分钟前
vue3中使用medium-zoom
前端·vue.js
xump27 分钟前
如何在DevTools选中调试一个实时交互才能显示的元素样式
前端·javascript·css
折翅嘀皇虫28 分钟前
fastdds.type_propagation 详解
java·服务器·前端
Front_Yue29 分钟前
深入探究跨域请求及其解决方案
前端·javascript
wordbaby31 分钟前
React Native 进阶实战:基于 Server-Driven UI 的动态表单架构设计
前端·react native·react.js
抱琴_31 分钟前
【Vue3】我用 Vue 封装了个 ECharts Hooks,同事看了直接拿去复用
前端·vue.js
风止何安啊33 分钟前
JS 里的 “变量租房记”:闭包是咋把变量 “扣” 下来的?
前端·javascript·node.js
Danny_FD38 分钟前
用 ECharts markLine 标注节假日
前端·echarts