创建元素节点的使用方法

来源：互联网发布：在线压缩js文件编辑：程序博客网时间：2024/06/05 23:57

createElement()方法可创建元素节点。此方法可返回一个 Element 对象。

我们来创建一个按钮，代码如下：

<script type="text/javascript">   var body = document.body;    var input = document.createElement("input");     input.type = "button";     input.value = "创建一个按钮";     body.appendChild(input);   </script>

效果：在HTML文档中，创建一个按钮。

我们也可以使用setAttribute来设置属性，代码如下：

<script type="text/javascript">     var body= document.body;                var btn = document.createElement("input");     btn.setAttribute("type", "text");     btn.setAttribute("name", "q");     btn.setAttribute("value", "使用setAttribute");     btn.setAttribute("onclick", "javascript:alert('This is a text!');");          body.appendChild(btn);  </script>

效果：在HTML文档中，创建一个文本框，使用setAttribute设置属性值。当点击这个文本框时，会弹出对话框“This is a text!”。

1. 在右边编辑器补充代码，完善createa(url,text)创建链接函数，参数1为链接地址，参数2为链接文本。函数中添加链接地址、文本、文字颜色属性。

2. 调用createa函数，链接地址 http://www.imooc.com，文本为:慕课网

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title></head><body><script type="text/javascript">var main = document.body;//创建链接function createa(url,text){var body=document.body;var i1=document.createElement("a");i1.href=url;i1.innerHTML=text;  i1.style.color="red";main.appendChild(i1)}// 调用函数创建链接createa("http://www.baidu.com","百度");</script> </body></html>

0 0