JS操作DOM
JS 操作 dom
2023-09-11 14:22:18 时间
【功能:点击按钮显示表单】
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
function displays()
{
//定义节点
var myRoot = document.getElementById("show");
var form = document.createElement("form");
var table = document.createElement("table");
var tr = new Array(3);
var td = new Array(6);
var input = new Array(6);
for(var i = 0; i < tr.length; i++)
{
tr[i] = document.createElement("tr");
}
for(var i = 0; i < td.length; i++)
{
td[i] = document.createElement("td");
}
for(var i = 0; i < input.length; i++)
{
input[i] = document.createElement("input");
}
//连接节点
myRoot.appendChild(form);
form.appendChild(table);
for(var i = 0; i < tr.length; i++)
{
table.appendChild(tr[i]);
}
for(var i = 0, j = -0.5; i < td.length; i++, j += 0.5)
{
tr[Math.round(j)].appendChild(td[i]);
td[i].appendChild(input[i]);
}
//设置属性
input[0].type="text";
input[0].value="用户名:";
input[0].style.border="none";
input[0].readOnly="true";
input[1].type="text";
input[2].type="text";
input[2].value="密码:";
input[2].style.border="none";
input[2].readOnly="true";
input[3].type="password";
input[4].type="reset";
input[5].type="submit";
}
</script>
</head>
<body>
<input type="button" value="显示表单" onclick="displays();">
<br/><br/><br/><br/>
<div id="show">
</div>
</body>
</html>
相关文章
- HTML5+JS,微信平台开发
- JS框架_(Qrcode.js)将你的内容转换成二维码格式
- JS - this 操作 dom , 添加样式
- JS - input输入框点击回车提交或者进行别的操作
- A2D JS框架 - DES加密解密 与 Cookie的封装(C#与js互相加密解密)
- JS获取当前日期
- Node.js链式回调
- vue项目中抽离.vue文件中的js代码
- js-BOM操作
- js事件处理函数中return的作用
- js中几种实用的跨域方法原理详解
- vue.js 3.2.20:拖动创建div及移动、缩放、删除等操作
- js操作节点对象-getElementById
- js字符串
- Atitit stomp.js conn连接activemq 目录 1.1. activemq 启动,已经默认开启了stomp ws的接口。。地址是1 1.2. Js 客户端代码1 1.3
- Atitit。监听键盘上下左右方向键事件java js jquery c#.net
- 总结js常用的dom操作(js的dom操作API)
- JS:使用Mock.js生成随机数据,拦截 Ajax 请求
- js数组Array的元素增删操作
- js 事件循环中宏任务和微任务执行顺序
- js中内建对象
- JS垃圾回收——和其他语言一样,JavaScript 的 GC 策略也无法避免一个问题:GC 时,停止响应其他操作,这是为了安全考虑
- 前端案例:飞机大战( js+dom 操作,代码完整,附图片素材)
- 原生js实现随机验证码HTMl-JS
- selenium框架操作stealth.min.js文件隐藏浏览器指纹特征
- 基于JAVA实现的WEB端UI自动化 - WebDriver高级篇 - 执行JS操作