js中常用追加元素的几种方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中常用追加元素的几种方法</title>
<link rel="stylesheet" href="css/rest.css"/>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
.container {
width: 1200px;
padding: 10px;
margin: 50px auto;
border: 1px solid lightcoral;
}
#wrap {
border: 1px solid lightseagreen;
}
.container p {
height: 30px;
line-height: 30px;
}
.btn-group {
margin-top: 20px;
}
button {
width: 80px;
height: 32px;
margin-right: 10px;
line-height: 32px;
text-align: center;
border: 0px;
}
</style>
</head>
<body>
<div class="container">
<div id="wrap">
<p class="first">我是第一个子元素</p>
<p class="second">我是第二个子元素</p>
</div>
<div class="btn-group">
<button class="append">append</button>
<button class="appendTo">appendTo</button>
<button class="prepend">prepend</button>
<button class="prependTo">prependTo</button>
<button class="after">after</button>
<button class="before">before</button>
<button class="appendChild" οnclick="appChild()">appendChild</button>
<button class="insertAfter">insertAfter</button>
<button class="insertBefore">insertBefore</button>
</div>
</div>
</body>
</html>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
$(function () {
//append(),在父级最后追加一个子元素
$(".append").click(function () {
$("#wrap").append("<p class='three'>我是子元素append</p>");
});
//appendTo(),将子元素追加到父级的最后
$(".appendTo").click(function () {
$("<p class='three'>我是子元素appendTo</p>").appendTo($("#wrap"));
});
//prepend(),在父级最前面追加一个子元素
$(".prepend").click(function () {
$("#wrap").prepend("<p class='three'>我是子元素prepend</p>");
});
//prependTo(),将子元素追加到父级的最前面
$(".prependTo").click(function () {
$("<p class='three'>我是子元素prependTo</p>").prependTo($("#wrap"));
});
//after(),在当前元素之后追加（是同级关系）
$(".after").click(function () {
$("#wrap").after("<p class='siblings'>我是同级元素after</p>");
});
//before(),在当前元素之前追加（是同级关系）
$(".before").click(function () {
$("#wrap").before("<p class='siblings'>我是同级元素before</p>");
});
//insertAfter(),将元素追加到指定对象的后面（是同级关系）
$(".insertAfter").click(function () {
$("<p class='three'>我是同级元素insertAfter</p>").insertAfter($("#wrap"));
});
//insertBefore(),将元素追加到指定对象的前面（是同级关系）
$(".insertBefore").click(function () {
$("<p class='three'>我是同级元素insertBefore</p>").insertBefore($("#wrap"));
});
});
//appendChild(),在节点的最后追加子元素
function appChild() {
// 创建p节点
var para = document.createElement("p");
// 创建文本节点
var node = document.createTextNode("我是子集appendChild新段落。");
// 把文本节点添加到p节点里
para.appendChild(node);
// 查找div1
var element = document.getElementById("wrap");
// 把p节点添加到div1里
element.appendChild(para);
}
</script>
js中常用追加元素的几种方法的更多相关文章
- js中删除数组元素的几种方法
1:js中的splice方法 splice(index,len,[item]) 注释:该方法会改变原始数组. splice有3个参数,它也可以用来替换/删除/添加数组内某一个或者几个值 inde ...
- jquery追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）
最近项目不是很忙,抽空整理了下,js中常用追加元素的几种方法. <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- python中删除某个元素的3种方法
python中关于删除list中的某个元素,一般有三种方法:remove.pop.del 1.remove: 删除单个元素,删除首个符合条件的元素,按值删除 举例说明: >>> st ...
- JS中常用的输出方式(五种)
1.alert("要输出的内容"); ->在浏览器中弹出一个对话框,然后把要输出的内容展示出来 ->alert都是把要输出的内容首先转换为字符串然后在输出的 2.doc ...
- JS获取HTML DOM元素的8种方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...
- js中判断对象类型的几种方法
我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...
- Java之——删除ArrayList中的反复元素的2种方法
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/47414935 ArrayList是Java中最经常使用的集合类型之中的一个.它同意 ...
- js中字符串转换为数值的两种方法的区别
在js中字符串转换为数值的方法有三种:转换函数,强制类型转换,隐式转换 1.转换函数 parseInt() //将字符串转换为整型 parseFloat() //将字符串转换为浮点型 转换函数在 ...
- JS中date日期初始化的5种方法
创建一个日期对象: 代码如下: var objDate=new Date([arguments list]); 参数形式有以下5种: 1)new Date("month dd,yyyy hh ...
随机推荐
- 精尽Spring MVC源码分析 - HandlerExceptionResolver 组件
该系列文档是本人在学习 Spring MVC 的源码过程中总结下来的,可能对读者不太友好,请结合我的源码注释 Spring MVC 源码分析 GitHub 地址 进行阅读 Spring 版本:5.2. ...
- Docker 部署 _实现每日情话 定时推送（apscheduler）
由于最近工作比较忙,后续博客可能更新不及时,哈哈 前言: 由于python对于微信推送不够友好,需要扫码登录,短信接口需要RMB.我就想到了qq邮箱发送到好友,然而微信有qq邮箱提醒功能,就实现了我需 ...
- python装饰器学习详解-函数部分
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理 最近阅读<流畅的python>看见其用函数写装饰器部分写的很好,想写一些自己的读书笔记. ...
- Autofac官方文档翻译--一、注册组件--4组件扫描
官方文档:http://docs.autofac.org/en/latest/register/scanning.html Autofac 组件扫描 在程序集中Autofac 可以使用约定来找到并注册 ...
- python序列（一）列表的增加
列表是python中内置有序可变序列,列表的所有元素放在一堆中括号"{}"中,并使用逗号隔开 1.列表的创建 使用"="直接创建一个列表 >>> ...
- Centos7 根目录存储空间扩展方法
Centos7 根目录存储空间扩展方法 一.首先通过 df -hl 命令查看磁盘占用情况,其中根目录已经被占满,此时需要对其进行扩容 二.针对虚拟机环境的centos7系统根存储空间扩容,可利 ...
- 微服务 - 服务注册发现（三）Consule
Consul 集群 在consul方案中,每个提供服务的节点上都要部署和运行consul的agent,所有运行consul agent节点的集合构成consul cluster.consul agen ...
- CentOS7离线安装mysql5.6
下载mysql5.6,系统选择redhat,版本选择RHEL7,下载RPM Bundle后得到一个tar文件.这里得到文件MySQL-5.6.44-1.el7.x86_64.rpm-bundle.ta ...
- 手把手教你用SonarQube+Jenkins搭建--前端项目--代码质量管理平台 (Window系统)
前言 网上教程大多介绍的是Linux系统下SonarQube+Jenkins如何使用,这是因为这两款软件一般都是部署在服务器上,而大多数服务器,采用的都是Linux系统.大多数服务器用Linux的原因 ...
- MySQL为Null会导致5个问题，个个致命！
在正式开始之前,我们先来看下 MySQL 服务器的配置和版本号信息,如下图所示: "兵马未动粮草先行",看完了相关的配置之后,我们先来创建一张测试表和一些测试数据. -- 如果存在 ...