首页 前端知识 js、jquery 动态添加/删除元素内容

js、jquery 动态添加/删除元素内容

2024-04-18 00:04:12 前端知识 前端哥 586 933 我要收藏

如下图,dom元素太多且重复,不想直接写在页面上,还可以js或者jquery动态添加至页面上

在这里插入图片描述

一、jQuery 写法

方法一

jQuery添加元素方法

<div class="test" data-timg="box-top" data-wimg="word"></div>
for (var k = 1; k < 6; k++) {
	let tt = $(".test");
	let imgs = '<img class="ling n'+ k +'" src="images/' + k
	+ '.png" alt=""><img class="box-top t'+ k +'" src="images/' +tt.data('timg')
	+ '.png" alt=""><img class="word word'+ k +'" src="images/' + tt.data('wimg') + k + '.png" alt="">';
	tt.append(imgs)
}

结果:
在这里插入图片描述

方法二

jQuery文档操作 html()

var tHtml = [], lHtml = [];
for(var i=0;i<8;i++){
	tHtml.push('<img class="i'+i+'" src="images/word'+ i +'.png">');
	lHtml.push('<img class="i'+i+'" src="images/line'+ (i+1) +'.png">');
}
$('.test').html(tHtml.join(''));
$('#test').html(lHtml.join('')); 

二、js 写法

// 在 body 元素中动态添加一个 div 元素,并为它设置 id 和文本内容
let div = document.createElement("div");
div.innerText = '追加的内容'; // 添加文本
div.innerHTML = "Hello World!"; // 添加HTML
div.innerHTML = div.innerHTML + '<h3>追加内容为H3标签</h3>'; // 或者在原有内容的元素上添加,也可写成div.innerHTML += '<h3>追加内容为H3标签</h3>';
document.body.appendChild(div);


// 删除
div.parentNode.removeChild(div);
// 或者删除div的子节点,
while(div.hasChildNodes()) {
    div.removeChild(div.firstChild); // 删除第一个子节点,当div下还存在子节点时 循环继续
}

三、删除

jQuery删除

.remove()

$('.test').find('img:eq(0)').remove(); // find查找要删除的img

js删除

删除元素自身

xxx.remove();
xxx.parentNode.removeChild(xxx);

删除子元素

.removeChild();

删除父元素

xxx.parentNode.parentNode.removeChild(xxx的父元素);
转载请注明出处或者链接地址:https://www.qianduange.cn//article/5188.html
标签
评论
发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

Python读写Json文件

2024-04-23 22:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!