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 ...
随机推荐
- js下 Day01、DOM对象，BOM浏览器对象模型
一．初识DOM 1．什么是DOM?为什么学习DOM 2．DOM是实现js在网页实现交互的关键环节,我们的js代码就是通过DOM的方法来实现对于html内容的操作. 3．认识DOM实现了js和网页结合的 ...
- 个人微信公众号搭建Python实现 -个人公众号搭建-处理消息和事件（14.3.4)
@ 目录 1.消息处理 2.事件处理 3.返回处理 关于作者 1.消息处理 现在只处理text文本消息 没有关键字的就交给qingyunke机器人去应付,这是一个免费的对话api 从配置文件中读取关键 ...
- 多任务-python实现-协程（2.1.11）
多任务-python实现-协程(2.1.11) 23/100 发布文章 qq_26624329 @ 目录 1.概念 2.迭代器 1.概念 协程与子例程一样,协程(coroutine)也是一种程序组件. ...
- 某毒霸网站存在信息泄露和sql注入
通过钟馗之眼搜索目标网站的证书使用者找到信息泄露的网站, 点击上图中的edit会跳转 手工注入sql发现有效 that's all
- 制作3D小汽车游戏（下）
书接上回,这一节我们分模块说一说怎么写一个这样的游戏 1. 初始化场景.相机和渲染器 这几乎是绘制three必须做的事情,我们有两套场景和相机,一个是主场景和相机,另一个是小地图的场景和相机(用来俯视 ...
- java中将从数据库查询的信息输出到excel文件中
package com.cn.peitest.excel; import java.io.File; import java.lang.reflect.Field; import java.util. ...
- 后台查询出来的list结果 在后台查询字典表切换 某些字段的内容
list=listEFormat(list, "Class_type", "611");//list查询数据库得到的结果Class_type /** * @Ti ...
- 【STL 源码剖析】浅谈 STL 迭代器与 traits 编程技法
大家好,我是小贺. 点赞再看,养成习惯 文章每周持续更新,可以微信搜索「herongwei」第一时间阅读和催更,本文 GitHub : https://github.com/rongweihe/Mor ...
- python实现AES/DES/RSA/MD5/SM2/SM4/3DES加密算法模板汇总
都是作者累积的,且看其珍惜,大家可以尽量可以保存一下,如果转载请写好出处https://www.cnblogs.com/pythonywy 一.md5加密 1.简介 这是一种使用非常广泛的加密方式,不 ...
- 栈面板类StackPane？
创建栈面板,将在其上放置两个按钮,并用样式属性设置按钮和栈面板的外观样式. package yuan; //栈面板的应用 import javafx.application.Application; ...