博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
比较好玩的动态添加网页元素
阅读量:7122 次
发布时间:2019-06-28

本文共 1417 字,大约阅读时间需要 4 分钟。

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

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

1.动态创建按键

2动态创建链接

3动态创建表格

效果如下:

 

 

 

 

源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">

<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 = "";
            link.innerText = "百度";
            divlink.appendChild(link);
        }
        function tableCreate() { var data = { "google":"","搜狐":"","百度":"" }
        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,如需转载请自行联系原作者

你可能感兴趣的文章
解决git push代码到github上一直提示输入用户名及密码的问题
查看>>
Angular2生命周期钩子函数
查看>>
【Arduino基础教程】RS1307时钟模块
查看>>
10月22日科技联播:饿了么与屈臣氏达成合作;马蜂窝回应数据造假
查看>>
win10电脑桌面便签怎么固定在桌面?
查看>>
[Spring] Web层AOP方式进行参数校验
查看>>
Java入门之继承(上)
查看>>
《Scikit-Learn与TensorFlow机器学习实用指南》 第05章 支持向量机
查看>>
虚函数表
查看>>
Sublimne text3配置python3和robot开发环境
查看>>
shiro实战系列(十四)之配置
查看>>
MySQL查询数据表中数据记录(包括多表查询)
查看>>
Android Studio目录结构浅析
查看>>
visio 2013 如何制作形状的剪切、联合、组合、拆分、相交、剪除功能
查看>>
从壹开始前后端分离【 .NET Core2.0 Api + Vue 2.0 + AOP + 分布式】框架之一 || 前言...
查看>>
函数式编程与面向对象编程[3]:Scala的OOP-FP混合式编程与抽象代数理论
查看>>
bboss平台子系统切换方法
查看>>
Python全栈 项目(HTTPServer、PiP使用)
查看>>
隐私浏览器 Tor Browser 8.0.8 发布,安全更新版本
查看>>
12.2.0.1.0 Grid RU安装
查看>>