jQuery 如何先创建、再修改、后添加DOM元素

例如顺序执行【创建】-> 【修改】-> 【添加】三个动作。

由于jQuery支持链式操作，其实就是设计模式的builder模式，所以我们可以把三个操作串在一起来执行。

首先创建一个p元素，内容包含一个a元素。

复制代码代码如下:

$(‘<p><a>jQuery</a></p>‘)

然后为a元素添加一个href属性

复制代码代码如下:

$(‘<p><a>jQuery</a></p>‘).find(‘a‘).attr(‘href‘, ‘http://www.jquery.com‘)

最后把新添加的p元素添加到body中

复制代码代码如下:

$(‘<p><a>jQuery</a></p>‘).find(‘a‘).attr(‘href‘, ‘http://www.jquery.com‘).end().appendTo(‘body‘)

注意，这个地方需要执行end()操作，否则添加到body中的元素不是p元素变成了p元素中的a元素。

其实，end()操作不能等价与撤销，它返回的是previous selection，但是这个selection已经被end之前的操作修改过。

复制代码代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(‘<p><a>jQuery</a></p>‘).find(‘a‘).attr(‘href‘, ‘http://www.jqeury.com‘).appendTo(‘body‘);
</script>
</body>
</html>

时间： 2024-12-28 10:40:48

jQuery 如何先创建、再修改、后添加DOM元素的相关文章

jquery on=>keyup无法绑定未来js添加的元素

$("[name=red_count]").on("keyup", countKeyUpBind);即使使用on的,也无法绑定未来元素, 所以直接在动态添加的时候,再进行绑定keyup事件至于click是允许的同时,对于jquery中before,after添加的标签,不管是click还是keyup都是没有绑定未来元素的功能 //红包个数统计 $("[name=red_count]").on("keyup", countK

在容器最前面添加DOM元素 parent.insertBefore(new, parent.children[0])

//判断容器当前有没有子级元素,如果没有直接appendChild就行了; if (p.children[0]) { p.insertBefore(span, p.children[0]); } else { p.appendChild(span); }

jQuery中动态创建、添加元素的方法总结

<input type="button" value="创建元素" id="btn"> <div id="box"></div> <p id="main">这是文中一段话</p> //点击按钮,动态创建元素 //方法一:$()创建元素,后用append()方法添加.append() 还可以把其他地方元素添加进这个对象中. $('#btn').cli

jQuery添加删除DOM元素

1.添加DOM元素 append prepend before after //append 添加在同级元素的之前实例: <div class="header"><p>添加节点在同级元素之后</p></div> var pageup = '<strong>append 在同级元素之后</strong><br>'; $('.header').on('click',funct

工作积累（六）——jQuery实现DOM元素事件绑定

用 jQuery 为DOM元素绑定事件时,如果用下面这种方式: <button class="dynamic-bind">按钮一</button> $(function() { $('.dynamic-bind').on('click', function(e) { alert(e.type); //'click' }); }); 那么如果在绑定事件之后通过 jQuery 添加与该选择器相同的新的DOM元素: $('.dynamic-bind:las

jQuery -> 克隆DOM元素

使用jQuery内置的clone函数可以克隆DOM元素,而且clone函数支持链式调用下例是clone的一个简单用法,它做了一个ul的副本,并添加到body中. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <ul> <li>list</li> <li>list</li&

jQuery -> 如何【先创建、再修改、后添加】 DOM元素

如何一气呵成地,on the fly地操作DOM元素呢? 例如顺序执行[创建]-> [修改]-> [添加]三个动作. 由于jQuery支持链式操作,其实就是设计模式的builder模式,所以我们可以把三个操作串在一起来执行. 首先创建一个p元素,内容包含一个a元素. $('<p><a>jQuery</a></p>') 然后为a元素添加一个href属性 $('<p><a>jQuery</a></p>'

jQuery -&gt; 怎样【先创建、再改动、后加入】 DOM元素

怎样一气呵成地.on the fly地操作DOM元素呢? 比如顺序运行[创建]-> [改动]-> [加入]三个动作. 因为jQuery支持链式操作,事实上就是设计模式的builder模式,所以我们能够把三个操作串在一起来运行. 首先创建一个p元素,内容包括一个a元素. $('<p><a>jQuery</a></p>') 然后为a元素加入一个href属性 $('<p><a>jQuery</a></p>

Jquery append 生成的新表单，手动输入修改后，无法获取html真实代码的解决方案

function doSubmit() { $('#T_form select').each(function(){ $(this).find(':selected').attr('selected', true); }); $("#T_form :text").each(function(){ $(this).attr('value', $(this).val()); }); $("#T_form :radio").each(function(){ $(this)