jQuery中动态创建、添加元素的方法总结
2024-10-20 16:06:06
<input type="button" value="创建元素" id="btn">
<div id="box"></div>
<p id="main">这是文中一段话</p>
//点击按钮,动态创建元素
//方法一:$()创建元素,后用append()方法添加。append() 还可以把其他地方元素添加进这个对象中。
$('#btn').click(function() {
var el = $('<p>这是一个P标签</p>');
// $('#box').append(el); //两种添加方法
el.appendTo($('#box'));
})
//方法二:.html()方法为元素 创建并添加子元素。 html() 还可以把其他地方元素添加进这个对象中。支持添加标签。
$('#btn').click(function() {
$('#box').html('<h>标题是。。</h>');
})
//如DOM中创建元素方法
var box = document.getElementById('box');
var p = document.createElement('p');
p.innerText = '这是第二个哦~';
box.appendChild(p);
//jQuery中添加元素的方法:
var i = 1;
$('#btn').click(function () {
var p = $('<p> 第二个p标签' + i + '</p>')
i++;
//一、在元素内添加,可以把其他地方元素也添加进来:对象.html('元素及内容')
$('#box').html($('#main'));
//二、在元素内添加,依次(往后)添加:对象.append(元素) 或者 元素.appendTo(对象)
$('#box').append($('#main'));
$('#box').append(p);
//三、在元素内添加,依次(往前)添加:对象.prepend(元素);
$('#box').prepend(p);
//四、在元素前添加兄弟元素,依次(往后)添加:对象.before(元素);
$('#box').before(p);
//五,在元素后添加兄弟元素,依次(往前)添加:对象.after(元素);
$('#box').after(p);
})
最新文章
- 关闭英文拼写检查,关闭xml验证
- Smack 3.3.1 发布,Java 的 XMPP 开发包
- 【BZOJ-2251】外星联络 后缀数组 + 暴力
- BOOTCAMP版本适配机型表
- C语言小结之链表
- W5100使用中的常见问题
- Glide的常用方法注释
- 将自己apk打包进其他apk安装思路
- LeetCode 563. Binary Tree Tilt (二叉树的倾斜度)
- Android Service详解
- Matlab以MEX方式调用C源代码
- Linux 上使用LVM 扩展磁盘Size
- Fiddler查看接口响应时间
- 京东无人超市的成长之路 如何利用AI技术在零售业做产品创新?
- ML(1)——机器学习简述
- gitlab入门
- MODIS 数据产品预处理
- 【nginx】配置Nginx实现负载均衡
- Starting with neural network in matlab[zz]
- PHP+Gtk实例(求24点)