Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >jquery 元素节点操作 - 创建节点、插入节点、删除节点

jquery 元素节点操作 - 创建节点、插入节点、删除节点

作者头像
Devops海洋的渔夫
发布于 2019-05-31 02:59:30
发布于 2019-05-31 02:59:30
9.8K00
代码可运行
举报
文章被收录于专栏:Devops专栏Devops专栏
运行总次数:0
代码可运行

jquery的节点操作说明

前面的篇章对于jquery的元素操作大部分是使用html()的方式来操作,这种直接使用字符串创建的方式也是性能最高的。

使用html()操作节点

首先编写一个div包含一个a标签,如下:

下面来给这个a的后面加上一个span标签看看,如下:

在这里面可以看到,首先使用$('div').html()得到原来的内部元素字符串,然后再拼接其他brspan元素字符串,再赋值回$('div').html()内,这样就可以根据字符串操作好元素了。

如果能用这种方式操作元素就尽量用这种方式,因为这种方式操作元素的话性能最高。

另外还有其他创建节点、插入节点、删除节点的方法,如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var $div2 = $('<div>这是一个div元素</div>');  # 创建节点
append() appendTo() #在现存元素的内部,从后面插入元素
prepend() prependTo() #在现存元素的内部,从前面插入元素
after() insertAfter() #在现存元素的外部,从后面插入元素
before() insertBefore() #在现存元素的外部,从前面插入元素

创建节点

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var $div = $('<div>');
var $div2 = $('<div>这是一个div元素</div>');

插入节点

1、append()和appendTo():在现存元素的内部,从后面插入元素

下面写一个div内部插入元素的示例如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
        $(function(){
            var $span = $('<span>这是一个span</span>');

            $('div').append($span);
        })

可以看到append的方法就是父元素增加一个子元素节点,而appendTo()则是反过来,是子元素增加到父元素的后面,写法如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
        $(function(){
            var $span = $('<span>这是一个span</span>');
            $span.appendTo($('div'));
        })

另外,还可以将现有的a剪切到div的最后,操作如下:

那么假设有两个a标签呢?是否会批量直接剪切过来,还是要使用each()方法遍历一遍?

直接就可以整体剪切过来。

2、prepend()和prependTo():在现存元素的内部,从前面插入元素

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
            // 在前面插入一个p元素
            var $p = $('<p>这是一个p标签</p>');
            $('div').prepend($p);

下面来演示一下prependTo()方法,如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
            // 在前面插入一个p元素
            var $p = $('<p>这是一个p标签</p>');
            $p.prependTo($('div'));

同样,也可以将已有的元素剪切至最前面。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('a').prependTo($('div'));

3、after()和insertAfter():在现存元素的外部,从后面插入元素

写一个p标签插入到div的后面,如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//在div外部后面加一个p元素
$('div').after($p);
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var $p = $('<p>这是一个p标签</p>');
$p.insertAfter($('div'));

4、before()和insertBefore():在现存元素的外部,从前面插入元素

div前面插入一个div #box2的元素。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
            // 在div外部的前面加一个#box2 div
            var $div2 = $('<div id="#box2">这是div2元素</div>');
            $('div').before($div2);
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
            // 在div外部的前面加一个#box2 div
            var $div2 = $('<div id="#box2">这是div2元素</div>');
            $div2.insertBefore($('div'));

删除节点

删除a元素,如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 删除节点
$('a').remove();
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.04.27 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
PapersWithCode发布代码完整性自查清单:想获得更多星,你需要注意这五项
可复现性是科学领域长期关注的话题,近期人工智能和机器学习社区也对此投入了更多关注。例如 ICML、ICLR 和 NeurIPS 这些顶级学术会议都在努力推进将实验代码和数据作为评审材料的一部分提交,并鼓励作者在评审或出版过程中提交代码以帮助结果可复现。
机器之心
2020/05/19
5230
PapersWithCode发布代码完整性自查清单:想获得更多星,你需要注意这五项
论文无法复现!真公开处刑!PapersWithCode上线「论文复现报告」
现在,越来越多的机器学习(ML)研究者选择在论文发表时同步公开自己的代码,像 arXiv 这样的论文预印本平台也选择与机器学习资源网站 Papers with Code 合作,支持研究者在 arXiv 页面上添加代码链接。ICML、ICLR、NeurIPS 等一些顶会也要求投稿人在提交论文的时候附上代码,以供审稿人测试,确保其研究结果的可复现性。
Amusi
2021/06/09
2.6K0
论文无法复现!真公开处刑!PapersWithCode上线「论文复现报告」
公开处刑:研究者自建Papers Without Code网站,张贴复现不了的论文
二十几天前,Reddit 用户「ContributionSecure14」在机器学习社区疯狂吐槽:「我花了一个星期尝试复现一篇论文,结果失败了。上网搜了一下才发现,也有其他人说这篇论文的结果无法复现。」
机器之心
2021/03/15
9140
公开处刑:研究者自建Papers Without Code网站,张贴复现不了的论文
公开处刑:PapersWithCode上线“论文复现报告”,遏制耍流氓行为!
这不,就在昨日,PapersWithCode官宣其上线了新功能,在单篇论文的详情页面展示“公开处刑判决书”——论文复现报告。
AI科技评论
2021/07/02
7280
[翻] ML 代码完整性检查清单
翻译 ML Code Completeness Checklist 完整版请戳原文查看。
caoqi95
2020/04/14
1.1K0
[翻] ML 代码完整性检查清单
可复现性?稳健性?Joelle Pineau无情揭示强化学习的问题
Joelle Pineau,图源:https://research.fb.com/why-diversity-matters-in-ai-research/
机器之心
2018/12/26
5490
NLP简报(Issue#10)
Google AI和DeepMind的研究人员发布了一个有趣的多任务基准,称为XTREME[1],旨在评估语言模型的跨语言泛化能力,学习多语言表示形式。基准测试benchmark对40种语言和9种不同的任务进行了测试,这些任务需要在语法或语义上对不同级别的含义进行推理。本文还使用最新的模型为多语言表示提供基线结果,例如mBERT,XLM和MMTE。
NewBeeNLP
2020/08/26
8800
NLP简报(Issue#10)
2020年,那些「引爆」了ML社区的热门论文、库和基准
不平凡的 2020 年终于过去了!这一年,由于新冠肺炎疫情的影响,CVPR、ICLR、NeurIPS 等各大学术会议都改为线上举行。但是,机器学习社区的研究者和开发者没有停下脚步,依然贡献了很多重大的研究发现。
机器之心
2021/03/15
5370
2020年,那些「引爆」了ML社区的热门论文、库和基准
NeurIPS 2019投稿规则大变化!必须回答研究可复现问题,倡导提交论文代码
谷歌研究员hardmaru评论称,虽然不强制执行,但也给了评审依据,来快速拒绝那些不承诺披露代码的论文。
量子位
2019/04/22
1.2K0
NeurIPS 2019投稿规则大变化!必须回答研究可复现问题,倡导提交论文代码
【复现谷歌论文,成为共同作者】Facebook AI Lab负责人发起ICLR可重复性竞赛
【新智元导读】如今机器学习论文可复现性低成了研究界愈发关注的问题。为此,Facebook蒙特利尔AI Lab负责人联合全球5所大学,发起了机器学习可复现挑战赛,让参与者复现ICLR-18提交的论文。今年参赛者主要是学生,他们将复现的研究来自世界各地,其中不乏顶级人工智能实验室的论文。不仅如此,如果复现结论对原论文贡献重大,在原作者的要求下,参赛者还有可能作为共同作者被接收。 我们相信科学,因为我们可以验证科学结论的准确性。而验证准确性时,我们的方法是重复科学家的原始实验。那么,当原始实验无法复现的时候会发生
新智元
2018/03/21
8890
【复现谷歌论文,成为共同作者】Facebook AI Lab负责人发起ICLR可重复性竞赛
英国AI学者Michael Lones独家避坑指南,破解机器学习五大陷阱
近日,Michael A. Lones教授在arXiv提交了一篇论文,全面论述了机器学习在实际应用中的常见陷阱以及对应方法,以帮助机器学习的学术小白们快速入门。
AI科技评论
2021/08/25
5010
英国AI学者Michael Lones独家避坑指南,破解机器学习五大陷阱
MLK | 机器学习论文搜索利器推荐
简单介绍:arXiv是个提交论文预印本(preprint)的平台,里面的论文都没有经过同行评审(peer review),所以文章质量参差不齐,但却会比较新颖,可以从里面看下别人研究的新玩意。
Sam Gor
2019/08/16
7510
MLK | 机器学习论文搜索利器推荐
收藏|最优论文+代码查找神器,覆盖AI全领域(966个ML任务、8500+论文)
查找论文及对应源码的神器 Papers With Code 刚刚推出了最新版本,可以用图形界面查找你想要的 SOTA 实现,从应用领域到具体任务再到实现代码一步到位。据网站开发者介绍,里面包含了 966 个机器学习任务、515 个评估排行榜(以及当前最优结果)、8625 篇论文(带源码)、704 个数据集。
数据派THU
2019/03/08
1.4K0
收藏|最优论文+代码查找神器,覆盖AI全领域(966个ML任务、8500+论文)
机器学习工业复现的 12 个要素!
过去二十年来,我们对软件开发的理解有了大幅提升。其中一大部分原因是 DevOps 概念的出现及其在软件开发行业的广泛应用。 领先的软件公司都遵循着同样的模式:首先是在软件开发过程中快速迭代,然后进行持续集成、持续交付、持续部署。每个特性都要经过测试,看其提供价值的能力如何,而且软件始终要处于就绪的状态,并且通过自动化方法进行部署。 机器学习这个领域虽不同于传统的软件开发,但我们也能从软件开发行业汲取很多实用的经验教训。过去几年里,我们一直在开发生产型机器学习项目。我们的目标并不只是概念验证,而是与软件开发一样的可复现能力(reproducibility)。因此,我们构建了一套流程协调器、强大的自动化能力并建立了一套用于实现该目标的工作流程。 为什么不直接使用 Jupyter Notebook?从头开始构建一组包含所有处理步骤的笔记需要多长时间?为团队纳入新成员的难易程度如何?你现在可以复现两个月前的结果吗?能以多快的速度复现?你能将今天的结果和历史结果进行对比吗?你能在训练过程中关注到数据的出处吗?如果你的模型过时了又会发生什么? 我们遇到过所有这些问题。现在,我们将这些经验进行了归纳总结,得到了成功构建生产型机器学习的 12 个要素(类似于软件开发中的十二要素应用/12 factor app)。
Datawhale
2020/11/09
4200
一行代码即可调用18款主流模型!PyTorch Hub轻松解决论文可复现性
机器学习论文的可复现性一直是个难题。许多机器学习相关论文要么无法复现,要么难以重现。有时候论文读者经常为了调用各种经典机器学习模型,还要重复造轮子。
Python数据科学
2019/06/19
1.7K0
一行代码即可调用18款主流模型!PyTorch Hub轻松解决论文可复现性
17篇论文,详解图的机器学习趋势 | NeurIPS 2019
本文来自德国Fraunhofer协会IAIS研究所的研究科学家Michael Galkin,他的研究课题主要是把知识图结合到对话AI中。
AI科技评论
2019/12/18
1.7K0
当Git和Git-LFS无法解决机器学习复现问题时,是时候祭出DVC了
有人认为,由于软件工具的不充分,无法保证完全复现机器学习模型的结果,机器学习领域正「陷入危机」。这个危机可以通过为机器学习从业者提供更好的软件工具来解决。
机器之心
2019/06/20
2.2K0
当Git和Git-LFS无法解决机器学习复现问题时,是时候祭出DVC了
创立仅一年多,ML资源网站Papers with Code宣布加入Facebook AI
Papers with Code 正式加入 Facebook,这足以说明随着机器学习领域论文数量的剧增,如何快速获取想要的论文极其重要。机器之心之前也从 state-of-the-art 出发,尝试采集各领域的顶级论文,并希望有助于读者获取最新的研究成果。
机器之心
2019/12/24
6800
机器学习模型部署 | 剑桥研究者梳理了99篇相关研究(附论文下载)
在生产环境中部署机器学习模型是一个复杂的过程,需要考虑诸多因素,也存在很多挑战。近日,来自剑桥的研究者梳理了该流程常见的问题。
计算机视觉研究院
2022/01/25
2870
机器学习模型部署 | 剑桥研究者梳理了99篇相关研究(附论文下载)
[资源推荐] 必须收藏的两个查找论文和代码实现的网站!
无论是研究方向是 AI 方面的学生,或者是做机器学习方面的算法工程师,在掌握基础的机器学习相关知识后,都必须掌握搜索论文的技能,特别是研究或者工作领域方向的最新论文,更进阶一点的技能,就是可以复现论文的算法,这是在论文作者没有开源代码的时候的一个解决办法,但是在能够掌握这项技能前,我们希望能够搜索到其他人复现的代码。
kbsc13
2019/08/16
4.5K0
推荐阅读
PapersWithCode发布代码完整性自查清单:想获得更多星,你需要注意这五项
5230
论文无法复现!真公开处刑!PapersWithCode上线「论文复现报告」
2.6K0
公开处刑:研究者自建Papers Without Code网站,张贴复现不了的论文
9140
公开处刑:PapersWithCode上线“论文复现报告”,遏制耍流氓行为!
7280
[翻] ML 代码完整性检查清单
1.1K0
可复现性?稳健性?Joelle Pineau无情揭示强化学习的问题
5490
NLP简报(Issue#10)
8800
2020年,那些「引爆」了ML社区的热门论文、库和基准
5370
NeurIPS 2019投稿规则大变化!必须回答研究可复现问题,倡导提交论文代码
1.2K0
【复现谷歌论文,成为共同作者】Facebook AI Lab负责人发起ICLR可重复性竞赛
8890
英国AI学者Michael Lones独家避坑指南,破解机器学习五大陷阱
5010
MLK | 机器学习论文搜索利器推荐
7510
收藏|最优论文+代码查找神器,覆盖AI全领域(966个ML任务、8500+论文)
1.4K0
机器学习工业复现的 12 个要素!
4200
一行代码即可调用18款主流模型!PyTorch Hub轻松解决论文可复现性
1.7K0
17篇论文,详解图的机器学习趋势 | NeurIPS 2019
1.7K0
当Git和Git-LFS无法解决机器学习复现问题时,是时候祭出DVC了
2.2K0
创立仅一年多,ML资源网站Papers with Code宣布加入Facebook AI
6800
机器学习模型部署 | 剑桥研究者梳理了99篇相关研究(附论文下载)
2870
[资源推荐] 必须收藏的两个查找论文和代码实现的网站!
4.5K0
相关推荐
PapersWithCode发布代码完整性自查清单:想获得更多星,你需要注意这五项
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验