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

最新推荐文章于 2024-04-26 16:47:03 发布

Senora

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量685

点赞数

文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/Senora/article/details/130245206

版权

如下图，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的父元素);