JS DOM对象 创建元素节点 createElement()方法可创建元素节点。此方法可返回一个 Element 对象。 语法: document.createElement()

创建元素节点createElement

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

语法:

document.createElement(tagName)

参数:

tagName:字符串值,这个字符串用来指明创建元素的类型。

注意:要与appendChild() 或 insertBefore()方法联合使用,将元素显示在页面中。

我们来创建一个按钮,代码如下:

<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!”。

任务

试一试,实现在HTML文档中创建一个链接,并设置相应属性。

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

2. 调用createa函数,链接地址 http://www.baidu.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 main1 = document.body;
//创建链接
function createa(url,text)
{
    var alink = document.createElement("a");
    alink.setAttribute("href",url);
    alink.innerHTML=text;
    return alink;
    
    
}
// 调用函数创建链接
main1.appendChild(createa("http://www.baidu.com","度娘"));

</script> 
</body>
</html>




你可能感兴趣的:(JavaScript,对象,dom,web前端)