jQuery简单操作HTML的DOM
2024-09-05 00:11:28
#转载请留言联系
如果需要了解什么是HTML的dom，可以参考：http://www.w3school.com.cn/htmldom/index.asp
下面的是jQuery操作DOM，并不是JavaScript。
创建新标签
var new_content = $('<h1>我是标题</h1>'); //$函数中如果参数不是一个选择器语法，则会被认为是一个新增的元素
在现存元素的内部，从后面放入元素
1.append
示例（在标题1下面添加标题2）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var new_content=$('<h1>我是标题2</h1>');
$('body').append(new_content) //注意这里
})
</script>
</head>
<body>
<h1>我是标题1</h1>
</body>
</html>
2.appendTo
示例（在标题1下面添加标题2）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var new_content=$('<h1>我是标题2</h1>');
new_content.appendTo($('body')) //注意这里
})
</script>
</head>
<body>
<h1>我是标题1</h1>
</body>
</html>
需要注意的是：append与appendTo方法的使用，位置是不同的！
在现存元素的内部，从前面放入元素
prepend()与prependTo()，用法和append()与appendTo()一样。只是一个在前面放入，一个在后面放入。
在现存元素的外部，从后面放入元素
1.after
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var new_content=$('<h1>我是标题2</h1>')
$('h1').after(new_content)
})
</script>
</head>
<body>
<h1>我是标题1</h1>
</body>
</html>
2.insertAfter
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var new_content=$('<h1>我是标题2</h1>')
new_content.insertAfter($('h1'))
})
</script>
</head>
<body>
<h1>我是标题1</h1>
</body>
</html>
在现存元素的外部，从前面放入元素
before()和insertBefore()
删除节点
$('#list li').eq(2).remove(); // 移除下标2
清空内容
$('#list').empty();
最新文章
- [NodeJS] 优缺点及适用场景讨论
- java基础总结——基础语法1
- 移动端 触摸事件 ontouchstart、ontouchmove、ontouchend、ontouchcancel
- eclipse中安装adt插件
- 75 int类型数组中除了一个数出现一次或两次以外，其他数都出现三次，求这个数。[2行核心代码]
- HTML-Canvas01
- northwind数据库介绍
- 配置 Hdp 4 Window 中的一些问题
- 纯HTML标签详解
- windows下的SASS/Compass的安装与卸载
- ImageView 缩放
- Objective-c 类接口 （@interface） （类定义）
- 招商信诺生产jvm 配置和自己的eclipse jdk配置
- xstream实现对象的序列化和反序列化（Java）
- @JsonIgnore注解可以实现不返回前端字段
- 错误记录：vue跟vue编译器版本不一致
- POJ 2418 Hardwood Species 【Trie树】
- 使用if语句时应注意的问题（初学者）
- php随机生成汉字实现方法
- 码出高效，阿里巴巴JAVA开发手册1.4.0