创建元素节点的使用方法

最新推荐文章于 2023-04-24 11:21:47 发布

logobitch

最新推荐文章于 2023-04-24 11:21:47 发布

阅读量1.5k

点赞数

分类专栏： php

本文链接：https://blog.csdn.net/logobitch/article/details/47016195

版权

php 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>

logobitch

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
创建元素节点的使用方法

createElement()方法可创建元素节点。此方法可返回一个 Element 对象。我们来创建一个按钮，代码如下： var body = document.body; var input = document.createElement("input"); input.type = "button"; input.value = "创
复制链接

扫一扫

专栏目录