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