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程序设计有所帮助。
相关文章
一直让我困扰的是，我不知道如何去让这个效果 自动播放，或者费了很多周折。这可能叫初始化。2010-05-05
这篇文章主要为大家详细介绍了javascript表单控件实例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
本篇文章主要介绍了深入理解ES6的迭代器与生成器，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了微信小程序-基于ColorUI构建皮皮虾短视频去水印组件，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2020-11-11
这篇文章主要给大家介绍了关于微信小程序购物车、父子组件传值及calc的注意事项的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。接下来通过本文给大家介绍Javascript的表单验证-初识正则表达式，对js表单验证正则表达式相关知识感兴趣的朋友一起学习吧2016-03-03
下面小编就为大家带来一篇js 点击a标签 获取a的自定义属性方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
这篇文章主要为大家详细介绍了js如何获取网页所有图片，js获取网页所有图片的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了js如何获取url中"?"后面的字串,需要的朋友可以参考下2014-05-05
基于JavaScript将表单序列化类型的数据转化成对象的处理（允许对象中包含对象）
这篇文章主要介绍了基于JavaScript将表单序列化类型的数据转化成对象的处理（允许对象中包含对象） 的相关资料,需要的朋友可以参考下2015-12-12
最新评论