A5下载 - 努力做内容最丰富最安全的下载站!

A5站长下载站

当前位置:A5下载 > 编程开发 > 网站开发 > javascript中createElement的两种创建方式

javascript中createElement的两种创建方式

时间:2015-05-14 11:20作者:zhao人气:30

本文实例讲述了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程序设计有所帮助。

标签javascript,createElement,两种,创建

相关下载

查看所有评论+

网友评论

网友
您的评论需要经过审核才能显示

公众号