Javascript小技巧之生成html元素_javascript技巧
程序员文章站
2022-04-08 18:10:36
...
Javascript 生成 HTML元素的方法在本文中介绍2种,第一种是比较正规的创建元素方法,第二种是利用javascript中的write()方法直接写出html元素。
//createElement()创建input元素到obj对象中
var obj = document.createElement('input');
//选择要生成地点的前一个元素
var before = document.getElementById('before');
//设置obj元素名,值
obj.name='name';
obj.value='value';
//setAttribute是可以*定义属性的,不仅id和type,name和value也可以在这定义
obj.setAttribute('id','idname');
obj.setAttribute('type','typename');
//在前一个元素后面添加obj
before.appendChild(obj);
document.write("");
方法一:
复制代码 代码如下:
//createElement()创建input元素到obj对象中
var obj = document.createElement('input');
//选择要生成地点的前一个元素
var before = document.getElementById('before');
//设置obj元素名,值
obj.name='name';
obj.value='value';
//setAttribute是可以*定义属性的,不仅id和type,name和value也可以在这定义
obj.setAttribute('id','idname');
obj.setAttribute('type','typename');
//在前一个元素后面添加obj
before.appendChild(obj);
方法二:
复制代码 代码如下:
document.write("
这里列举了这2种生成html的元素的方法,第一种比较规范,代码比较多,第二种比较少代码。
推荐阅读
-
html5小技巧之通过document.head获取head元素
-
11个教程中不常被提及的JavaScript小技巧(推荐)
-
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
-
分享5个小技巧让你写出更好的 JavaScript 条件语句
-
html5小技巧之通过document.head获取head元素
-
Javascript调试之console对象——你不知道的一些小技巧
-
Word实用小技巧之快速生成大段文字快速输入线条
-
JavaScript调试之console.log调试的一个小技巧分享
-
Powershell小技巧之使用Jint引擎在PowerShell中执行Javascript函数
-
JavaScript中的一些实用小技巧总结