开发者社区> 科技小先锋> 正文

比较好玩的动态添加网页元素

简介:
+关注继续查看

比较好玩的动态添加网页元素

javascript 有一些很有趣的功能。下面介绍三样小功能。

1.动态创建按键

2动态创建链接

3动态创建表格

效果如下:

 

 

 

 

源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script type="text/javascript">
        function btnClick() {
            var divMain = document.getElementById('divMain');
            var input = document.createElement("input");
            input.type = "button";
            input.value = "我是动态按钮";
           
            divMain.appendChild(input);
        }
        function linkCreate() {
            var divlink = document.getElementById("divlink");
            var link = document.createElement("a");
            link.href = "http://www.baidu.com";
            link.innerText = "百度";
            divlink.appendChild(link);
        }
        function tableCreate() { var data = { "google":"http://www.google.com","搜狐":"http://www.souhu.com","百度":"http://www.baidu.com" }
        var tablediv = document.getElementById("tablediv");
        for (var key in data) {
            var value = data[key];
            var tr = document.createElement("tr");
            var td1 = document.createElement("td");
            td1.innerText = key;
            tr.appendChild(td1);
            var td2 = document.createElement("td");
            td2.innerHTML = "<a href='" + value + "'>"+value+"</a>";
            tr.appendChild(td2);
            tablediv.appendChild(tr);
  
        }
    }
   
    </script>
</head>
<body>
 <form id="form1" runat="server">
    <div id="divMain">
       
    </div>
 <div id="divlink">
 </div>
 <div id="tablediv">
 </div>
 
 <input id="Button1" type="button" value="动态创建按钮" id="Button2"
     type="button" value="动态创建链接" /><input id="Button3" type="button"
         value="创建一个链接的表格" />
    </form>
</body>
</html>



本文转自gauyanm 51CTO博客,原文链接:http://blog.51cto.com/gauyanm/422284,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Python之抓取网页元素
import urllib.request from bs4 import BeautifulSoup url = "http://www.wal-martchina.com/walmart/store/14_hubei.
844 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
29514 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
13763 0
为你的网页图标(Favicon)添加炫丽的动画和图片
  Favico.js 在让你的网页图标显示徽章,图像或视频。你设置可以轻松地在网页图标中使用动画,可以自定义类型的动画,背景颜色和文字颜色。它支持的动画,像幻灯片,渐变,弹出等等。 您可能感兴趣的相关文章 分享10个让你惊叹的Chrome浏览器实验项目 精心挑选的优秀jQuery Aj...
853 0
35套用于扁平化网页设计的图标和页面元素《下集》
  扁平化设计是指舍弃渐变、阴影、高光等拟物化的视觉效果,从而打造出一种看上去更加平面的界面风格。扁平化的网页设计更适合用于需要同时支持多种屏幕尺寸的响应式设计技术中。今天,我给大家带来35套用于扁平化设计的图标和网页元素,记得分享和推荐啊! 您可能感兴趣的相关文章 10套华丽的Windo...
827 0
前端给网页添加明水印的解决办法
前端给网页添加明水印的解决办法
38 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
20893 0
JS获取网页中HTML元素的几种方法分析
getElementById getElementsByName getElementsByTagName 大概介绍   getElementById ,getElementsByName ,getElementsByTagName ###adv###   后两个是得到集合,byid只是得到单...
730 0
VBS操作JS网页元素实例
'=========================================================================='' VBScript Source File -- Created with SAPIEN Technologies PrimalScript 4.
706 0
6965
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载