js JQ动态添加div标签
function renderList(data){
var str = '';
for(var i = 0; i < data.length; i++){
// 动态添加li
str += '<li onclick="getFile(\''+ data[i].file_id + '\',\'' + data[i].file_name+ '\',\'' + data[i].file_type+'\',this)" class="filelist">' + data[i].file_name + '<a href="#" class="easyui-linkbutton" onclick="downLoad(\''+ data[i].file_id + '\')">下载</a>' + '</li>';
}
$(".file_list").append(str);
}
使用‘ ’ 字符串模板包裹第v标签,比如‘<li></li>’,其中如果有onclick,需要将其中的参数使用 ‘’ 包裹起来,‘ ’需要\进行转义,转义后的\' \' ,中间再使用 ’ ‘包裹,参数使用+ 连接,最后
onclick="downLoad(\''+ data[i].file_id + '\')" 。效果:

还有其中有style的
var str = '<div class="queries-box" style="float:left"><input id="agency_id" class="easyui-combotree combotree-f combo-f textbox-f" data-options="" style="width: 56%; height: 24px; display: none;" textboxname="agency_id" comboname="agency_id"></div>'
var olr = $('#topnav .fr');
olr.append(str);
js JQ动态添加div标签的更多相关文章
- js/jq 动态添加的元素不能触发绑定事件解决方案
<!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版 ...
- ThinkPHP框架下,给jq动态添加的标签添加点击事件移除标签
jq移除标签主要就是$("#要移除的id").remove();不再赘述,这里要提醒的是jq中动态添加标签后怎样添加点击事件.一般的jq添加点击事件是用这种方法$("#i ...
- js 面向对象 动态添加标签
有点逻辑 上代码 thml布局 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 动态添加div及对应的js、css文件
动态添加div及对应的js.css文件 在近期的项目开发中需要在首页中添加很多面板型的div,直接加载代码显得很繁琐,于是利用js封装一个动态添加div及其对应css文件和js文件的方法供大家参考使用 ...
- js获取不到动态添加的标签的值的解决方法
遇到了js无法获得动态添加的标签的值,百度了一番,最后自己解决了问题,但是原理现在还不怎么明确. $("input[id='txtAttValue']").each(functio ...
- JS动态添加的标签无法绑定事件解决方案~~~
今天用ajax实现动态插入数据时发现监听一直不起作用,一样的代码,非动态的就可以监听实现 这是困扰了我近一个小时的bug,后面才理解到可能是动态插入导致的! 看了看网上的解决方案,似乎都不太通俗,讲的 ...
- js动态添加Div
利用JavaScript动态添加Div的方式有很多,在这次开发中有用到,就搜集了一下比较常用的. 一.在一个Div前添加Div <html> <body> <div id ...
- jq动态添加的元素触发绑定事件无效
<div class='a'> <div class='b'> </div> 其中$('.a')是html页面的元素,$('.b')是jq动态添加的元素.$(&qu ...
- JavaScript 动态添加div 绑定点击事件
1.动态添加div function cDiv(num){ var oDiv=document.createElement("div"); oDiv.className='divs ...
随机推荐
- @EnableHystrixDashboard注解无法使用情况
本人使用的是springboot 2.1.3,在引入hystrix仪表盘时,发现@EnableHystrixDashboard注解无法使用. 原来的pom配置 度娘之后,发现是springboot版本 ...
- skywalking中文文档
https://github.com/apache/skywalking/blob/v5.0.0-alpha/docs/README_ZH.md 大家可以前往如下地址下载我们的发布包: l Apac ...
- 如何下载 Ubuntu 镜像文件?
Ubuntu,是一款基于 Debian Linux 的以桌面应用为主的操作系统,内容涵盖文字处理.电子邮件.软件开发工具和 Web 服务等,可供用户免费下载.使用和分享. 但是对于国内的用户来说如果直 ...
- mybatis源码配置文件解析之五:解析mappers标签(解析XML映射文件)
在上篇文章中分析了mybatis解析<mappers>标签,<mybatis源码配置文件解析之五:解析mappers标签>重点分析了如何解析<mappers>标签中 ...
- 【vue】---- ElementUI 实现上传Excel
1.功能描述:vue 项目使用 el-upload 实现上传 Excel. 2.功能效果:在el-upload基础上做了样式整改. 3.功能实现: // el-upload 上传组件 <temp ...
- IntelliJ IDEA快速实现Docker镜像部署
一.Docker开启远程访问 [root@izwz9eftauv7x69f5jvi96z docker]# vim /usr/lib/systemd/system/docker.service #修改 ...
- CentOS7 安装rz和sz命令,安装netstat
yum install lrzsz CentOS7 安装netstat命令 yum install net-tools
- 小烈送菜——奇怪的dp
小烈送菜 题目描述 小烈一下碰碰车就被乐满地的工作人员抓住了.作为扰乱秩序的惩罚,小烈必须去乐满地里的"漓江村"饭店端盘子. 服务员的工作很繁忙.他们要上菜,同时要使顾客们尽量高兴 ...
- Flask-实现下载功能
1. 接口返回真实的文件 这种情况比较简单, flask里带有此类api, 可以用send_from_directory和send_file. 核心代码如下: from flask import se ...
- TCP Wrappers(简单防火墙)---限制IP登录ssh
1.TCP Wrappers 简介 TCP_ Wrappers是- 一个工作在第四层(传输层)的的安全工具,对有状态连接(TCP)的特定服务进行安全检测并实现访问控制,界定方式是凡是调用libwrap ...