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

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

js、jquery 动态添加/删除元素内容_第1张图片

一、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 = '+ k +'" src="images/' + k
	+ '.png" alt="">+ k +'" src="images/' +tt.data('timg')
	+ '.png" alt="">+ k +'" src="images/' + tt.data('wimg') + k + '.png" alt="">';
	tt.append(imgs)
}

结果:
js、jquery 动态添加/删除元素内容_第2张图片

方法二

jQuery文档操作 html()

var tHtml = [], lHtml = [];
for(var i=0;i<8;i++){
	tHtml.push('+i+'" src="images/word'+ i +'.png">');
	lHtml.push('+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标签

'
; // 或者在原有内容的元素上添加,也可写成div.innerHTML += '

追加内容为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的父元素);

你可能感兴趣的:(javascript,jquery,前端)