JQ 动态添加节点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>

<title></title>
<style type="text/css">

.listyle
{
background-color: Red;
}

</style>

<script src="Scripts/jquery-1.4.1.js"
type="text/javascript"></script>

<script type="text/javascript">
$(function() {

var link = $("<a href=‘http://www.baidu.com‘>百度</a>");

$("div:first").append(link);
})

$(function() {
var data = { "百度":
"http://www.baidu.com", "新浪": "http://www.sina.com" };

$.each(data, function(key, value) {
var tr =
$("<tr><td>" + key + "</td><td><a href=" + value +
">" + key + "</a></td></tr>");

$("#tablesites").append(tr);
});

})
$(function() {

$("#RemoveUL").click(function() {
// $("ul
li.listyle").remove();
$("ul li[class=listyle]").remove();
//返回被删除的项
});
});
$(function() {

$("#btntoright").click(function() {
var opt = $("#sl1
option:selected").remove();
$("#sl2").append(opt);

});
});
</script>

</head>
<body>
<div>
</div>

<table id="tablesites">
</table>
<ul>

<li>sdfsdfsdf</li>
<li
class="listyle">sdfsdfsdf</li>

<li>sdfsdfsdf</li>
<li class="listyle
">sdfsdfsdf</li>
<li>sdfsdfsdf</li>

<li class="listyle">sdfsdfsdf</li>
</ul>
<br
/>
<input type="button" id="RemoveUL" value="删除" /><br
/>
<select id ="sl1" multiple ="multiple" size ="6" >

<option>山东</option>
<option>山东</option>

<option>山东</option>

<option>山东</option>
<option>山东</option>

<option>山东</option>
</select multiple
="multiple">
<input type ="button" value ="》》" id
="btntoright"/>
<select id ="sl2" multiple ="multiple" size
="6"></select>
</body>
</html>

时间: 2024-11-11 13:49:44

JQ 动态添加节点的相关文章

jquery动态添加节点

<1> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title&

jq动态添加的元素触发事件无效

<div class='a'> <div class='b'> </div> 其中$('.a')是html页面的元素,$('.b')是jq动态添加的元素.$(".b").click(function(){})方法失效 原来jq中动态添加的元素不能直接使用$(".b").click(function(){});的方法,要使用$(".a").on('click','.b',function(){}); $(&quo

给div中动态添加节点并设置样式

前端IOS今天需要动态的在图片前面添加一个按钮 主要是在使用 bt.setAttribute("class","aaa"); 可以对创建的节点使用setAttribute添加属性. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .aaa{ backgroun

Javascript 动态添加节点(thinking in DOM)

test.html & example.js 文件说明了传统技术:document.write & innerHTML 的用法 test.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> Test </title> </head> <body> <div id="testd

js实现html节点、CSS样式、事件的动态添加以及html覆盖层的添加

(一)js实现html节点.CSS样式.事件的动态添加 ①场景描述:我们需要动态获取后台数据并将这些数据以列表方式展示,其中列表存在自己的列表样式,每个item都存在自己的点击事件.....那么在这种情况下我们是不是就需要用到动态添加节点的模式去处理呢? ②代码记录如下: $.ajax({ url : "***.action", type : 'post', dataType : 'json', contentType : "application/x-www-form-ur

Hadoop学习笔记—13.分布式集群中节点的动态添加与下架

开篇:在本笔记系列的第一篇中,我们介绍了如何搭建伪分布与分布模式的Hadoop集群.现在,我们来了解一下在一个Hadoop分布式集群中,如何动态(不关机且正在运行的情况下)地添加一个Hadoop节点与下架一个Hadoop节点. 一.实验环境结构 本次试验,我们构建的集群是一个主节点,三个从节点的结构,其中三个从节点的性能配置各不相同,这里我们主要在虚拟机中的内存设置这三个从节点分别为:512MB.512MB与256MB.首先,我们暂时只设置两个从节点,另外一个作为动态添加节点的时候使用.主节点与

将HTML字符转换为DOM节点并动态添加到文档中

将HTML字符转换为DOM节点并动态添加到文档中 将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术. 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题: 1 字符串转换为HTML DOM节点的基本方法及性能测试 2 动态生成的DOM节点添加到文档中的方法及性能测试 本文的示例: 有如下代码段 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&

Hadoop学习笔记—13.分布式集群中的动态添加与下架

开篇:在本笔记系列的第一篇中,我们介绍了如何搭建伪分布与分布模式的Hadoop集群.现在,我们来了解一下在一个Hadoop分布式集群中,如何动态(不关机且正在运行的情况下)地添加一个Hadoop节点与下架一个Hadoop节点. 一.实验环境结构 本次试验,我们构建的集群是一个主节点,三个从节点的结构,其中三个从节点的性能配置各不相同,这里我们主要在虚拟机中的内存设置这三个从节点分别为:512MB.512MB与256MB.首先,我们暂时只设置两个从节点,另外一个作为动态添加节点的时候使用.主节点与

Hadoop动态添加/删除节点(datanode和tacktracker)

总的来说,正确的做法是优先通过配置文件,再在具体机器上进行相应进程的启动/停止操作. 网上一些资料说在调整配置文件的时候,优先使用主机名而不是IP进行配置. 总的来说添加/删除DataNode和TaskTracker的方法非常相似,只是操作的配置项和使用的命令有微小差异. 1. DataNode 1.0 配置文件 在master/namenode下修改配置文件conf/mapred-site.xml. 关键参数dfs.hosts和dfs.hosts.exclude. 注意:不同hadoop版本的