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程序设计有所帮助。
相关文章
这篇文章主要介绍了JS什么场景不适合箭头函数，对箭头函数感兴趣的同学，可以参考下2021-04-04
这篇文章主要介绍了微信小程序实现上传照片代码实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
这篇文章主要为大家详细介绍了如何利用JavaScript实现获取和解析页面内容,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下2025-03-03
本篇文章主要介绍了js弹窗返回值(window.open方式)。需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要为大家详细介绍了EXTJS7实现点击拖拉选择文本，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了使用JavaScript字符串解决回文数的方案,JavaScript中的字符串是一种数据类型,用于表示文本数据,字符串可以包含任意字符序列,包括字母、数字、符号和空格,灵活掌握字符串的解决问题思想,巧用字符串解决回文数,需要的朋友可以参考下2024-05-05
这篇文章介绍了javascript闭包的高级使用方法实例，有需要的朋友可以参考一下2013-07-07
这篇文章主要介绍了小程序如何自主实现拦截器,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
详解Python中logging日志模块在多进程环境下的使用
许多应用程序中都会有日志模块，用于记录系统在运行过程中的一些关键信息，以便于对系统的运行状况进行跟踪。这篇文章给大家主要介绍了在Python中logging日志模块在多进程环境下的使用,需要的朋友可以参考借鉴，下面来一起看看吧。2016-12-12
这篇文章主要介绍了javascript文件加载管理简单实现方法,可实现顺序加载所有js文件的功能,非常简单实用,需要的朋友可以参考下2015-07-07
最新评论