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

浏览器效果:

相关推荐
lichenyang45329 分钟前
Vue状态管理工具pinia的使用以及Vue组件通讯
前端
腹黑天蝎座30 分钟前
如何更好的封装一个接口轮询?
前端·react.js
AlenLi30 分钟前
JavaScript - 观察者模式的实现与应用场景
前端·设计模式
siroi33 分钟前
【nginx】NJS 的简单实践
前端
饮水机战神35 分钟前
震惊!多核性能反降11%?node接口压力测试出乎意料!
前端·node.js
一只叁木Meow36 分钟前
JavaScript数学库深度对比
前端
顾辰逸you37 分钟前
uniapp--咸虾米壁纸项目(一)
前端·微信小程序
方方洛1 小时前
电子书阅读器:epub电子书文件的解析
前端·产品·电子书
idaibin1 小时前
Rustzen Admin 前端简单权限系统设计与实现
前端·react.js
GISer_Jinger1 小时前
Trae Solo模式生成一个旅行足迹App
前端·javascript