动态创建和移除HTML标签
1、w3school定义
添加新内容的四个 jQuery 方法:
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
如需删除元素和内容,一般可使用以下两个 jQuery 方法:
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
2、创建HTML实例
//创建元素
function createTableElement(){
if(OPERATE_OPRION.channelInputIndex<7){
var table=$("#tabel_add_channel");
var index=OPERATE_OPRION.channelInputIndex+1;
var elements=" <tr id='row_"+index+"'>"
+"<td align='right' >频道名称"+index+":</td>"
+"<td><input type='text' id='add_channel_name_"+OPERATE_OPRION.channelInputIndex+"' style='width:160px;' data-options='required:true' /> <a href='javascript:void(0)' onclick='removeTableElement("+index+")'>移除</a></td>"
+"</tr>";
table.append(elements);
OPERATE_OPRION.channelInputIndex++;
}else{
$.messager.alert('添加输入框消息', "已经到达添加上限,不能再继续添加");
}
}
3、移除HTML实例
//移除创建的元素
function removeTableElement(index){
$("tr","#tabel_add_channel").each(function(){
var idStr=$(this).attr("id");
var ss=idStr.split("_");
var id=parseInt(ss[1]);
if(id==index){
$(this).remove();
OPERATE_OPRION.channelInputIndex--;
}
});
}
动态创建和移除HTML标签的更多相关文章
- js动态创建及移除div的方法
本文实例讲述了js动态创建及移除div的方法.分享给大家供大家参考.具体实现方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
- 动态创建一些常的html标签
原文:动态创建一些常的html标签 一段时间来,不管是在学习还是应用asp.net mvc应用程序,较多情况之下,需要动态创建一些html标签.如这篇<文本框下面有两个铵钮,点就加点减就减> ...
- JS动态引入js,CSS——动态创建script/link/style标签
一.动态创建link方式 我们可以使用link的方式.如下代码所示. 二.动态创建style方式 但是,这样的话,需要加载整个css文件,但是那样有可能浪费一个http请求并占用一个服务器请求数,并等 ...
- javascript动态创建script标签,加载完成后调用回调
代码如下: var head = document.getElementsByTagName('head')[0]; var script = document.createElement('scri ...
- 使用DOM动态创建标签
本文是参考<javascript Dom 编程艺术>第八章的内容所写,用到的知识点,就是关于创建平稳的web页面. 使用DOM方法: getElementById() getElement ...
- JS动态引入js、CSS动态创建script/link/style标签
一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.create ...
- HTML中关于动态创建的标签无法绑定js事件的解决方法:.on()方法的 [.selector]
在前端页面的时候,会经常遇到用JavaScript动态创建出来的Button按钮或其他标签无法使用点击事件的问题.如下代码,使用jquery在body中动态创建一个class为demo的Button按 ...
- DOM – 7.动态创建DOM + 8.innerText innerHTML value
7.动态创建DOM 8.innerText innerHTML value 7+8 练习:案例:点击按钮动态增加网站列表,分两列,第一列为网站的名字,第二列为带网站超链接的网站名.增加三行常见网站 ...
- JavaScript DOM编程基础精华02(window对象的属性,事件中的this,动态创建DOM,innerText和innerHTML)
window对象的属性1 window.location对象: window.location.href=‘’;//重新导航到新页面,可以取值,也可以赋值. window.location.reloa ...
随机推荐
- Linux用户基础
http://itercast.com/lecture/21 操作系统通过用户.组概念来管理使用计算机的人 用户代表一个使用计算机的使用者,操作系统通过用户概念限制一个使用者能够访问的资源 组用来组织 ...
- uva10245-The Closest Pair Problem(平面上的点分治)
解析:平面上的点分治,先递归得到左右子区间的最小值d,再处理改区间,肯定不会考虑哪些距离已经大于d的点对,对y坐标归并排序,然后从小到大开始枚举更新d,对于某个点,x轴方向只用考虑[x-d,x+d]( ...
- 【POJ1581】A Contesting Decision(简单模拟)
没有什么弯路,直接模拟即可.水题. #include <iostream> #include <cstring> #include <cstdlib> #inclu ...
- android中创建模拟器的 SDCard
在eclipse中安装了android环境后,可以直接创建AVD和sdcard的,windows->Android Virtual Device Manager,创建一个AVD时,可以同时创建s ...
- pyqt 配置文件例子学习
# -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' import sys,datetime from PyQt4.QtC ...
- PHP设计模式笔记二:面向对象 -- Rango韩老师 http://www.imooc.com/learn/236
SPL标准库的使用 SPL是用于解决典型问题(standard problems)的一组接口与类的集合. 1.SPL提供了很多数据结构类,如SplStack.SqlQueue.SqlHeap.SplF ...
- 【HDU】 1018 Big Number
大意就是求 : log10(n!) = log10(1 * 2 * 3 * .......*n) = log10(1) + log10(2) + ........+log10(n); 打表的话会ML ...
- html进阶css(2)
选择器的类型 <!doctype html> <html> <head> <meta charset="utf-8"> <ti ...
- feel倍儿爽
今天装的360,在卸载就要权限,在自己的电脑卸载360还要权限,真是一物降一物,安装了个牛逼的卸载软件就卸载了
- 配置IIS
1.aspnet_regiis -i 重新安装IIs vs2013的命令符 2. 分配权限 1.对文件夹,权限,安全,分配权限 2.设置webconfig 对应的httpModel 及安全性 3.设 ...