javascript中createElement的两种创建方式

前端技术 2023/09/06 JavaScript

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

本文地址：https://www.stayed.cn/item/17490

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案