javascript中createElement的两种创建方式
更新时间：2015年05月14日 09:37:41 作者：永远爱好写程序
这篇文章主要介绍了javascript中createElement的两种创建方式,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了javascript中createElement的两种创建方式。分享给大家供大家参考。具体实现方法如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CreateElement的两种创建方式</title>
<script type="text/javascript">
function CreateButton1() {
var btn = document.createElement("input");
btn.type = "button";
btn.value = "我是动态创建的1";
btn.onclick = function () {
alert(this.value);
}
document.body.appendChild(btn);
}
function CreateButton2() {
var btn = document.createElement("<input type='button' value='我是动态创建的2' "+"onclick='OnClick2(this)' />");
document.body.appendChild(btn);
}
function OnClick2(btn) {
alert(btn.value);
}
function CreateLink() {
var link = document.createElement("<a href='http://www.baidu.com'>百度</a>");
//注意这里链接的文本“百度”是不会显示出来的，
//必须设置innerText或innerHTML
link.innerText = "百度";
document.body.appendChild(link);
}
function CreateLabel() {
var lbl = document.createElement("label");
lbl.setAttribute("for", "userName");
lbl.setAttribute("myAge", "12");
//可以设置自定义标示
lbl.innerText = "用户名:";
document.body.appendChild(lbl);
}
</script>
</head>
<body>
<input type="button" value="动态创建按钮1" onclick="CreateButton1()" />
<input type="button" value="动态创建按钮2" onclick="CreateButton2()" />
<input type="button" value="动态创建链接" onclick="CreateLink()" />
<input type="button" value="动态创建Label" onclick="CreateLabel()" />
<input type="text" id="userName" value="李莫" />
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
在一个项目中要求严格验证传入的json字符串与定义的 类匹配，否则不记录。后来查了好多资料才弄明白，下面小编给大家分享下关于json字符串与实体之间的严格验证，感兴趣的朋友一起看看吧2016-11-11
这篇文章主要介绍了JS实现“全选”和"全不选"功能代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
设置div的值想必大家都会吧，按要说动态设置想必知道的人及寥寥无几了，下面有个不错的示例，希望对大家有所帮助2013-10-10
这篇文章主要介绍了JS+CSS实现简单的二级下拉导航菜单效果,通过简单的JavaScript页面元素遍历及样式操作实现下拉菜单效果,非常简单实用,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了javascript禁止访客复制网页内容的方法,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了BootStrap tab选项卡使用小结，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了JS实现左右无缝轮播图代码的相关资料,小编看本段代码非常不错，具有参考借鉴价值，特此分享脚本之家平台，需要的朋友可以参考下2016-05-05
这篇文章主要介绍了基于js实现抽红包并分配代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了JS实现浏览器状态栏显示时间的方法,涉及JavaScript针对时间及状态栏操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
这篇文章主要介绍了Javascript操作表单实例讲解（下）的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
最新评论