每次在js代码里面想动态的拼个dom,然后append到页面上,都是各种麻烦,

要是可以直接在jsp页面弄个隐藏的model那是很好的,用js方法里面的clone方法也是很好的,还可以给不同部分set值。

为了以后简单点,我就把模板摆着,方便后面用得着的时候,复制粘贴。

function fillDialog(dataArray) {

var target = $("#dialogTarget");

target.empty();

for (var i = 0; i < dataArray.length; i++) {

var label = $('');

label.text("" + dataArray[i].channelName);

var input = $("");

input.prop("name", "checkbox");

input.prop("type", "checkbox");

input.prop("value", dataArray[i].id);

if (dataArray[i].showInUserStatistic) {

input.prop("checked", "true");

}

label.prepend(input);

target.append(label);

}

}

var trs = "";

for (var i = 0; i < dataArray.length; i++) {

var branchBank = dataArray[i].branch;

var newUser = dataArray[i].newUserNum;

var netBoostUser = dataArray[i].netBoostUserNum;

var closeUser = dataArray[i].closeUserNum;

var activeUser = dataArray[i].activeUserNum;

var index = activeUser.indexOf(".");

if (index > 0) {

//去分行活跃用户数的小数部分如:11.0 ---> 11

activeUser = activeUser.substring(0, index);

}

trs += "

" + branchBank + "";

trs += "

" + newUser + "";

trs += "

" + netBoostUser + "";

trs += "

" + closeUser + "";

trs += "

" + activeUser + "";

trs += "

";

}

newList.append("

" + trs + "");

tableChart.append(newList.show());

var $metric = $("#metric");

$metric.empty();

var optGroup0 = $("");

var optGroup1 = $("");

var optGroup2 = $("");

for(var i=0; i

var m = allMetricSources[i];

if( m != null && (m.type == stream_type || m.type == 2)){

var option = $("");

option.attr("value", m.metric);

option.attr("data_type", m.data_type);

option.attr("unit", m.unit);

option.html(m.title);

if (m.groupType == 0) {

optGroup0.append(option);

} else if (m.groupType == 1) {

optGroup1.append(option);

} else {

optGroup2.append(option);

}

}

}

$metric.append(optGroup0);

$metric.append(optGroup1);

$metric.append(optGroup2);

if(metric != undefined){

$metric.val(metric);

}

$metric.trigger("chosen:updated");

function fillRecoveryTable(data) {

var $tableBody = $("#recoveryTable").find("tbody");

$tableBody.empty();

var trs = "";

for (var i = 0; i < data.length; i++) {

var recovery = data[i];

trs += "

" + recovery.fileName + "";

trs += "

" + recovery.timeString + "";

trs += "

" + (recovery.result ? "成功" : "失败") + "";

trs += "

" +

"" +

"

";

trs += "

";

}

$tableBody.append(trs);

}

以上这篇在js代码拼接dom对象到页面上去的模板总结(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源:php中文网

html =拼接dom,在js代码拼接dom对象到页面上去的模板总结(必看)相关推荐

  1. Node.js 全网最详细教程 (第一章:Node学习入门必看教程)

    1:Node的学前必知: 1: 在学习node之前,想必你应该学习过HTML,CSS,JavaScript 2: 浏览器中的JavaScript由两部分组成:JS核心语法和WebAPI JS核心语法 ...

  2. 如何通过HTML标记或JS代码实现跳转返回页面顶部

    本文介绍三款简单的返回页面顶部代码,可以使用简单的HTML锚标记,也可使用JavaScript Scroll函数动态返回,其它的还有悬浮脚本等有点复杂了,本文不再介绍,大家根据自己需要选择其中的一种即 ...

  3. 2021-02-26js学习-arguement,函数,作用域链,js代码执行流程,对象创建,new执过程.

    问题: Agurement概念认识? 伪数组概念认识? 函数的两种声明方式? 函数中没有声明而直接使用的变量是全局变量吗? Js块级作用域认识? 作用域链 概念认识? Js引擎执行代码的两步是什么? ...

  4. java项目怎样提高性能_从代码的角度谈如何优化JAVA代码以提高性能【初、中级程序员必看】...

    最近复习Java基础感触颇深,同样是几行代码,别人写的运行效率就很大,自己写的就不是那么随意,这就牵扯到代码的性能优化问题,这个问题在初级阶段往往没有引起太多的重视,导致后来的工作中就没有往优化这个角 ...

  5. windows系统和linux系统可以使用相同的js代码吗_使用Sboxr自动发现和利用DOM(客户端)XSS漏洞...

    这一系列的博客文章将向你展示如何在单页或富JavaScript的应用程序上识别DOM XSS的问题.作为示例,我们将在DOM XSS playground(https://domgo.at)上解决10 ...

  6. html浏览器pc端禁止缩放,阻止pc端浏览器缩放js代码

    阻止pc端浏览器缩放js代码 众所周知:移动端页面禁止用户缩放界面只需加上即可,但是pc端确实比较麻烦,用户可以通过如下几种方式来缩放: windows: ctrl + +/- ctrl + 滚轮 浏 ...

  7. node源码详解(四) —— js代码如何调用C++的函数

    本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource4  本博客同步在https://cnodejs. ...

  8. 百度自动推送html5,百度暂停 JS 代码自动推送功能,代码是否需要删除?

    本月上旬末的时候百度站长平台就推送了一则关于:搜索资源平台自动推送暂停使用通知.说到由于升级维护,搜索资源平台链接提交-自动提交-自动推送(JS 代码推送)功能暂时停止使用.并且会在恢复使用时再次通知 ...

  9. 手机访问www如何自动跳转到m js代码实现

    手机访问www如何自动跳转到m js代码放到index.html 首页页面 <script>if(navigator.platform.indexOf('Win32')!=-1){ //p ...

  10. 如何保护前端JS代码?前端js代码加密

    Web前端JS代码需要保护吗? 这得具体情况具体分析. 1.如果只是写一段web页面图片轮播,或是跑马灯效果等等之类简单的功能.那不需要保护. 2.如果是精心设计一个绚丽的特效,如果想要保护这段自己付 ...

最新文章

  1. finally块中的代码一定会执行吗?
  2. 思路,如何快速应对客户提出的业务需求
  3. python3 处理 html转义字符
  4. Elasticsearch-PHP实战操作
  5. java http连接_Java中通过方法创建一个http连接并请求(服务器间进行通信)
  6. 输入一颗二元查找树,将该树转换为它的镜像
  7. 进程间的通信方式(一):共享内存
  8. 切点方法的事务参数的配置
  9. linux检查swap配置,Linux环境下swap配置方法
  10. python福利彩随机_看大神如何用Python分析福利彩票的秘密,百万大奖不是梦!
  11. Android 系统 (39)---OTA后启动第三方APP出现APP Crash
  12. PCB集成元件封装库下载推荐
  13. 【转载】蚁群算法原理及实现
  14. 042_Unicode对照表八
  15. 怎样在虚拟机装文件服务器,虚拟机下怎么解压文件
  16. 禁止QQ迷你首页运行【转】
  17. 提交application/x-www-form-urlencoded类型数据
  18. 如何调试ajax 和php
  19. 一个可用来记录Isilon各个节点的CPU,网络,磁盘性能的命令
  20. Eclipse 插件大全

热门文章

  1. Zsh安装及常用操作
  2. java 基础--类与对象的创建,引用,static静态方法的创建与使用,static变量
  3. SpringBoot SSM 心理咨询论坛社区
  4. 禅道备份功能_禅道备份处理
  5. python装饰器打印函数执行时间_使用python装饰器计算函数运行时间的实例
  6. Android10定位无法选择,Android 10不能使用uiautomatorviewer定位元素的终极解决方法
  7. win7副本不是正版_征途正版官网版下载-征途正版手游官网版下载1.0
  8. python在字典中插入新的数据_Python数据类型之字典dict
  9. 熔断机制什么意思_什么是“熔断机制”,为什么交易所需要它?看完你就明白了!...
  10. php实战视频教程 帝国cms二次开发,PHP实战视频教程,帝国CMS二次开发之完成首页模板的制作.ppt...