动态创建和移除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 ...
随机推荐
- Swap Nodes in Pairs 解答
Question Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1 ...
- C++ I/O标准库
C++学习: 返回指向函数的指针: int (*ff(int))(int *,int) 想写好这样的代码很难,含义:首先将ff声明为一个函数,它带有一个int形参.该函数返回 int (*)(int* ...
- Windows无需CygWin 使用NDK开发
无需cygwin,使用NDK进行开发 NDK从7开始自带编译器,在windows上无需配置cygwin的环境. 在eclips中配置NDK路径 在eclipse中点击菜单栏window-Perfe ...
- UNIX时间戳与日期的相互转换
mysql中UNIX时间戳与日期的相互转换 UNIX时间戳转换为日期用函数:FROM_UNIXTIME() select FROM_UNIXTIME(1410318106); 日期转换为UNIX时间戳 ...
- Html 加载音乐代码mp3
<object data="__PUBLIC__/home/mp3/media.mp3" type="application/x-mplayer2" wi ...
- PHP文件目录copy
/**(2) PHP文件目录copy @param string $dirsrc 原目录名称字符串 @param string $dirto 目标目录名称字符串 */ function copyDir ...
- qt model/view 架构基础介绍之QListWidget
# -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' from PyQt4.QtGui import * from Py ...
- 《招聘一个靠谱的iOS》面试题参考答案(下)
相关文章: <招聘一个靠谱的iOS>面试题参考答案(上) 说明:面试题来源是微博@我就叫Sunny怎么了的这篇博文:<招聘一个靠谱的 iOS>,其中共55题,除第一题为纠错题外 ...
- KafkaOffsetMonitor监控
介绍 KafkaOffsetMonitor是有由Kafka开源社区提供的一款Web管理界面,这个应用程序用来实时监控Kafka服务的Consumer以及它们所在的Partition中的Offset,你 ...
- gcc基本用法
GCC基本用法 GCC最基本的用法是: gcc [option] filenames option:编译器所需要的编译选项 filenames:要编译的文件名 gcc编译流程 都以 hello.c 为 ...