php中append,插入节点append()、insertAfter()的特殊用法：对原有DOM元素进行移动

2024-04-11 22:05:20

插入节点的方法: append()/appendTo()、prepend()/prependTo()、after()/insertAfter()、before/insertBefore()

这些插入节点的方法不仅能将新创建的DOM元素插入到文档中，也能对原有的DOM元素进行移动(若对已在文档中存在的元素使用插入节点的方法则相当于执行“移动节点”的操作)

实例↓

实现效果：点击测试按钮，将所有.test标签里面的内容都移到该标签外面并删除所有的.test标签

无标题文档

*{margin:0;padding:0;}

ul li{ list-style:none;}

img {border:0 none;}

body {padding:100px;}

input[type='button']{width:100px; height:38px;display:block;position:fixed;right:20%; top:50px;}

p{color:#f00;}

div{ color:#000; border:1px blue solid;}

div span{ display:block;}

$(function(){

$("input[type='button']").focus().click(function(){

$(".test >span").each(function(index, element) {

$(this).insertAfter($(this).parent()).prev().remove();

});

})

})

1、看不到class属性2、看不到class属性3、看不到class属性

提示：你可以先修改部分代码再运行。

当然也可以直接使用replaceWith()方法来实现上面的替换效果

无标题文档

*{margin:0;padding:0;}

ul li{ list-style:none;}

img {border:0 none;}

body {padding:100px;}

input[type='button']{width:100px; height:38px;display:block;position:fixed;right:20%; top:50px;}

p{color:#f00;}

div{ color:#000; border:1px blue solid;}

div span{ display:block;}

$(function(){

$("input[type='button']").focus().click(function(){

$(".test >span").each(function(index, element) {

var this_html=$(this).parent().html();

$(this).parent().replaceWith(this_html)

});

})

})

1、看不到class属性2、看不到class属性3、看不到class属性

提示：你可以先修改部分代码再运行。

php中append,插入节点append()、insertAfter()的特殊用法：对原有DOM元素进行移动相关推荐

jquery dom 节点append、before、after、prepend、insertBefore、empty、remove等添加、移除操作汇总
之前有个项目前端页面会根据权限进行DOM操作,比如:增加新增.编辑按钮,增加表格操作列等,涉及节点新增.某个节点前后插入.节点移除等操作,在此,对jquery DOM节点的各种操作做一总结. 1.父节 ...
jquery插入节点
jquery插入节点是一个非常有用的而且操作简单的功能点.在实际开发中我们难免会需要动态创建节点,用于展示我们的数据或者动态创建节点用于我们自己特有的业务. jquery提供了好几个插入方法:appe ...
【DOM编程艺术】动态创建标记（签）---创建和插入节点
window.οnlοad=function(){var para=document.createElement('p');var info= 'nodeName:';info += para.nod ...
【Excel自动化办公Part2】：向某个格子里写入内容、append()插入行、在表格中插入公式、插入行和列、删除行和列、移动格子
目录一.向某个格子中写入内容 sheet['A1'] = 'hello world' cell.value = 'I Love Python' 二.append()--插入一行的操作三.在表格中插 ...
双链表中插入节点（C语言实现）
文章目录 1. 相关背景介绍 1.1 双链表概念 1.2 双链表的优势与劣势 1.3 双链表插入节点的位置 2. 不同位置插入数据 2.1 在DLL的前端添加节点 2.2 在给定节点之前添加节点 2. ...
python学习笔记：插入函数append，extend与insert的使用与区别
python中的几个插入函数: append( )函数函数功能:append( )函数是在列表末尾添加新的对象. 易错点:使用 append() 函数添加列表时,是添加列表的「引用地址」而不是 ...
vue中向html插入节点标签（简单易懂）
正常vue中插入节点会报这个错: 原因:插入的不是节点,而是一个字符串,需要将这个字符串变为对象才能插入到HTML中简单几步: 1.创建新节点 2.将新节点替换要插入的标签(innerHTML方法) ...
JQueryDOM之插入节点
插入节点本篇文章主要介绍在jQuery中插入节点的几种常用方法: 插入子节点: append() 向每个匹配的元素内部追加内容 appendTo()将所有匹配的元素追加到指定的元素中. ...
编写代码，移除未排序的链表中的重复节点
2019独角兽企业重金招聘Python工程师标准>>> 解法一:如果不得使用临时缓冲区,该怎么解决? 要想移除链表中的重复节点,我们需要设法记录有哪些是重复的.这里只需要使用到一个简 ...

最新文章

热门文章