Jquery父级节点追加

最新推荐文章于 2024-08-14 10:15:16 发布
最新推荐文章于 2024-08-14 10:15:16 发布
阅读量202 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/guishugan/p/5993125.html
本文通过一个具体的HTML页面展示了如何使用jQuery进行DOM元素的追加操作，包括将新元素追加到目标容器的开头或末尾，并演示了如何移动已存在的DOM元素。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!-- 父节点追加 -->
<!DOCTYPE html>
<html lang="en">
<script src="../../public/js/jquery-1.7.2.min.js"></script>
<head>
    <meta charset="UTF-8">
    <titleDocument></title>
</head>
<body>
    <ul class="shu">
        <li>张飞</li>
        <li class="guan">关羽</li>
        <li>刘备</li>
    </ul>
    <ul class="wu">
        <li>周瑜</li>
        <li class="qiao">小乔</li>
        <li>黄盖</li>
    </ul>
    <input type="button" value="主动追加" onclick="fun1()">
    <input type="button" value="被动追加" onclick="fun2()">
</body>
</html>
<script>
    function fun1(){
        // $('.shu').append("<li>赵云</li>");  //往后面追加
        // $('.wu').prepend("<li>杜强</li>");    //往前面追加
        //$('.shu').append($('.qiao'));       //把小乔追加到shu  后追加
         $('.wu').prepend($('.guan'));        //
    }
    function fun2(){
        $("<li>张毅</li>").appendTo(".shu");   //后
        $("<li>陈鑫</li>").prependTo(".wu");        //前
        $($('.qiao')).appendTo('.shu');     //指定节点移动   前
        $($('.qiao')).prependTo('.shu');     //指定节点移动   后

    }
</script>

转载于:https://www.cnblogs.com/guishugan/p/5993125.html

JQuery中查找父元素，子元素,追加元素，插入元素和删除元素 及其他常用方法...
weixin_30614109的博客
05-29 2659
Jquery之所以强大，和其在获取对象时使用与css选择器兼容的语法有很大关系。而且它还兼容了CSS3的选择器，而且多出了不少。 所以jQuery的选择器也就变得很多很强大。就最基本的有以下四个: $('*') 匹配页面所有元素 $('#id') id选择器 $('.class') 类选择器 $('element') 标签选择器 $('E[attr]') 含有属性attr的元素E ...
js(jquery)中常用追加元素的几种方法：append，appendTo，after，before，insertAfter，insertBefore，appendChild
你如今的气质里，藏着你走过的路，经历过的事，读过的书，和爱过的人。
12-09 1165
<script type="text/javascript">// <![CDATA[ $(function(){ //append(),在父级最后追加一个子元素 $(".append").click(function(){ $("#wrap").append("<p class='three'>我...
jQuery的追加节点
m0_68189681的博客
03-21 1211
<body> <h2>节点追加(父子)</h2> <ul id="shu"> <li>刘备</li> <li>张飞</li> <li>关羽</li> </ul> <ul id="wu"> <li>孙权</li> <li>周瑜</li> .
jQuery：1.5.3，表单验证(父级(parent)层次追加(apped))
轻轻草原啊
06-08 116
ylbtech-jQuery:jQuery学习 jQuery语法实例 表单验证 效果截图   jQuery：1.5.3,表单验证（父级(parent)层次追加(apped)）HTML代码返回顶部 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;&...
JS、Jquery父子节点总结（转）
White feathe 的博客
04-18 5041
1、JS的父子节点del_ff(s); //清理空格 var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得s的下一个兄弟节点 var ps=s.previousSbiling; //得到s的上一个兄弟节点 var f
获取节点、父节点、兄弟节点
java_zhaoyanli的专栏
03-01 6937
new document function getNodes(){ var d1 = document.getElementById("d1"); var nodes = d1.childNodes; console.log(nodes); } /** * 获取 p1 的父节点 */ function getP1Parent(){
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
10-22
在探讨Web开发中如何利用JavaScript和jQuery获取DOM元素的关系时，父级元素、子级元素和兄弟元素是三个基础而核心的概念。通过准确获取这些元素，我们可以进行诸如样式修改、事件绑定、动态内容更新等操作。下面将...
jquery实现点击TreeView文本父节点展开/折叠子节点
12-11
今天客户提出要点击菜单（TreeView实现的）的父级节点时，展开节点。心想这个应该是很常见的功能吧，特意google了一下，发现大部分是将的不是js实现的，有些js实现的写的麻烦，干脆自己写一个吧，应该不难的。首先...
Day68 jQuery操作节点，Bootstrap
weixin_69595694的博客
08-14 674
1.2 操作属性 运行结果： 1.4 操作节点 1.4.1 创建元素节点 运行结果： 1.4.3 练习案例 2.jQuery事件 2.1 事件冒泡现象：(可能会考) 2.2 页面载入事件$(function(){}） 2.3 绑定事件 bind() 2.4 解绑事件 unbind() 2.5 切换事件hover() toggle() 2.6 事件应用案例 2.6.1 表单验证 2.6.2 实现选项卡
《前端》使用jquery选择器如何获取父级元素、同级元素、子元素--2020年8月26日
BelleDiao的博客
08-26 916
一、获取父级元素 1、 parent([expr]): 获取指定元素的所有父级元素 <!-- 获取父级、子、同级元素 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
jQuery向父级元素最前面添加元素—prepend
最有趣的编程
06-06 1万+
$("#galleryImage").change(function () { imgpath = getObjectURL(this.files[0]); $("#galleryImage-container").prepend("&lt;div class='img-thumb img-item galleryImage'&gt;&lt;img class='t...
jquery追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）
热门推荐
幸福滴嘴角上扬的博客
09-07 17万+
最近项目不是很忙，抽空整理了下，js中常用追加元素的几种方法。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;js中常用追加元素的几种方法&lt;/title&gt; &lt;link rel="stylesheet" h
jquery 为元素添加父节点
chidiantou7237的博客
12-30 592
1.wrap();//方法 2.unwrap//方法删除被选元素的父元素。 转载于:https://my.oschina.net/zhubaoxin/blog/816089...
jQuery怎么给元素添加父元素
心中有侠
09-14 5034
代码： $("选择器").wrap("&lt;p&gt;&lt;/p&gt;");  
jQuery——给元素添加父级的方法
桃花扇的博客
03-07 3254
介绍了.wrap()，.wrapAll(), .wrapInner(), .unWrap()方法
html 追加子元素,Dom元素子父节点操作、Dom元素创建追加
weixin_30983353的博客
06-02 1429
Dom元素子父节点操作通过父元素获取子元素var nav=document.querySelector("#nav");console.log(nav.childElementCount);console.log(nav.childNodes);childElementCount表示当前元素 子元素的个数childNodes表示子节点，包含文本和元素，返回的是Nodelist集合，返回值则包含le...
js追加html代码
qq_34138543的博客
06-16 2556
1.获取table var tbody =  $("#id").find("TR");//获取tr元素 2.删除元素（看需求） for(var  i=1;i tbody[i].remove();//删除节点 // 用于ie 浏览器 tbody[i].removeNode(true); } 3.要添加的html代码 var testName = "zhagnsan";//声明一个字
jquery append
最新发布
02-11
### 使用 jQuery `append` 方法 jQuery 提供了多种操作 DOM 的方法，其中 `.append()` 是用于向匹配元素集合中的每个元素内部追加内容的方法[^1]。 #### 基本语法 ```javascript $(selector).append(content,function(index)) ``` - **content**: 需要插入的内容，可以是 HTML 字符串、DOM 元素或 jQuery 对象。 - **function(index)**: 可选参数，返回待插入的 HTML 内容或者 DOM 元素。此函数接收两个参数：index 和 element，分别表示当前项索引位置以及对应的 DOM 元素。 #### 实际应用案例 假设有一个无序列表 `<ul>` 并希望动态添加新项目： ```html <ul id="myList"> <li>Item 1</li> <li>Item 2</li> </ul> <button onclick="addItem()">Add Item</button> <script> function addItem(){ $("#myList").append("<li>New item!</li>"); } </script> ``` 上述代码会在每次点击按钮时，在指定的 `<ul>` 列表末尾新增一项<li>New item!</li>. 另外还可以通过传递回调函数来实现更复杂的逻辑: ```javascript $("#parentElement").append(function(index){ return "<p>This is paragraph number " + (index + 1) + "</p>"; }); ``` 这段脚本会根据父级容器内已有子节点的数量自动调整所创建的新段落文字.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值