使用JS生成HTML标签,以达到母板页的效果
前台页面
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
<style>
.cls {
margin-left: 5px;
border: 1px;
}
</style>
</head> <body>
<form id="form1" runat="server">
<div id="div1">
</div>
<div id="div2"></div>
</form>
<script src="js/global.js"></script>
<script src="js/webForm1.js"></script>
</body>
</html>
webForm1.aspx
$(function () {
var div = document.getElementById('div1');
div.innerHTML = '<label class="cls">标题1</label><label class="cls">标题2</label><label class="cls">标题3</label>'
});
母板页的脚本
$(function () {
$("label").click(function () {
alert("你好,标题!");
});
});
webForm1页面的脚本
使用JS生成HTML标签,以达到母板页的效果的更多相关文章
- 原生js怎么为动态生成的标签添加各种事件
这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom ...
- 前端学习-使用JS库Leaflet.js生成世界地图并获取标注地址经纬度。
介绍:Leaflet是一个开源的JavaScript库,对移动端友好且对地图有很好的交互性. 大小仅仅只有 33 KB, 同时具有大多数地图所需要的特点. Leaflet设计的非常简单易懂, 同时具有 ...
- JS手动创建标签
代码: <html> <head> <title>js标签属性的添加</title> <script > function setxxx() ...
- js生成带logo的二维码
作为一名java程序员,一直以来都是使用服务端生成二维码,最近接触前端的设计,感觉二维码这块如果放到前端去生成,一方面可以减轻服务端的压力,访问带宽,另一方面,前端页面控制比较顺畅 闲话少叙,说下我的 ...
- js生成条形码插件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js生成二维码以及点击下载二维码
js生成二维码 jquery.qrcode.js可以快速使用页面生成二维码.但改项目有两个小问题:1.不支持中文:2.不支持二维码中间生成图片. 支持中文的jquery-qrcode jquery.q ...
- jq给动态生成的标签绑定事件的几种方法
经常遇到给动态生成的标签绑定事件不好用,自己简单测试总结了下,结论如下了: body> <!-- 下面是用纯动态方式生成标签 --> <div id="d2" ...
- js生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化.因此需要用到js生成生报表: 用到的组件: jquery.j ...
- 使用two.js生成的卫星环绕动画效果
来源:GBin1.com two.js是一个帮助你实现绘图和动画效果的类库,同时支持三种前端绘图实现: webgl svg 2d画布 使用这个类库,可以方便的支持这三种不同的实现,你只需要设置参数:T ...
随机推荐
- Linux Exploit系列之六 绕过ASLR - 第一部分
绕过ASLR - 第一部分 什么是 ASLR? 地址空间布局随机化(ASLR)是随机化的利用缓解技术: 堆栈地址 堆地址 共享库地址 一旦上述地址被随机化,特别是当共享库地址被随机化时,我们采取的绕过 ...
- mysql数据库查询过程探究和优化建议
查询过程探究 我们先看一下向mysql发送一个查询请求时,mysql做了什么? 如上图所示,查询执行的过程大概可分为6个步骤: 客户端向MySQL服务器发送一条查询请求 服务器首先检查查询缓存,如果命 ...
- Windows 10安装Python 2.7和MySQL-python
1. 安装Python Download Python 2. 安装MySQL-python pip install wheel (应该是可选) pip install mysqlclient==1.3 ...
- maven项目引入外部jar包
方式1:dependency 本地jar包 <dependency> <groupId>com.hope.cloud</groupId> <!--自定义--& ...
- string::empty
bool empty() const noexcept;注:判断string对象是否为空,为空返回true #include <iostream>#include <string&g ...
- 各种环境下搭建ruby on rails开发环境
win10上搭建raby on rails环境: 步骤如下 1.安装ruby (我选择的版本是ruby 2.2.3p173) 2.安装rails gem 在这之前建议先把gem的源换成淘宝的源,速度快 ...
- 开始PHP,常量/变量与内存间的关系--传值
一.常见的PHP代码嵌入式方式,与html结合 要注意:文件名后缀必须形如xxx.php否则html将无法解析 二.php脱离html代码独立工作,没有其他代码 不需要借助Apache工作,只需要ph ...
- 字符串类QString
采用Unicode编码,所以一个QChar占用两个字节使用隐式共享技术来节省内存和减少不必要的数据拷贝跨平台使用,不用考虑字符串的平台兼容性QString直接支持字符串和数字之间的相互转换QStrin ...
- python selenium 执行完毕关闭chromedriver进程
#OS是我们操作dos系统时需要引入的库 import os #杀死这个chromedriver进程,因为每次启动都会打开,所以需要kill,这里用的chrome浏览器,打开方式时chromedriv ...
- async异步改同步后怎么监听错误
当我们使用readFile()这种api,它第一个参数是报的错误,当使用async.await把它改写成同步,我们可以使用try { }catch{ }解决.