在前端开发中,如果想要仅向每个div追加一次内容,可以通过以下几种方式实现:
示例代码:
// HTML
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
// JavaScript
const divs = document.querySelectorAll('div');
divs.forEach(div => {
div.addEventListener('click', () => {
div.innerHTML += ' Appended content';
});
});
示例代码:
// HTML
<div id="div1" data-appended="false">Div 1</div>
<div id="div2" data-appended="false">Div 2</div>
<div id="div3" data-appended="false">Div 3</div>
// JavaScript
const divs = document.querySelectorAll('div');
divs.forEach(div => {
div.addEventListener('click', () => {
const appended = div.getAttribute('data-appended');
if (appended === 'false') {
div.innerHTML += ' Appended content';
div.setAttribute('data-appended', 'true');
}
});
});
示例代码:
// HTML
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
// JavaScript
const divs = document.querySelectorAll('div');
const appendedMap = new Map();
divs.forEach(div => {
appendedMap.set(div, false);
div.addEventListener('click', () => {
if (!appendedMap.get(div)) {
div.innerHTML += ' Appended content';
appendedMap.set(div, true);
}
});
});
以上是几种实现仅向每个div追加一次内容的方法,具体选择哪种方法取决于具体的需求和场景。在实际开发中,可以根据项目的要求进行选择,并结合相关的前端开发技术和工具进行实现。
腾讯云相关产品和产品介绍链接地址:
DOM节点操作 重绘与回流
1. DOM节点
DOM节点: DOM树里每一个内容都称之为节点
📷
1. 节点类型:
元素节点 • 所有的标签 比如 body、 div • html 是根节点
属性节点 • 所有的属性 比如 href
文本节点 • 所有的文本
重点记住元素节点, 可以更好的让我们理清标签元素之间的关系
1. 查找节点
1.查找父节点:
parentNode 属性, 返回最近一级的父节点 找不到返回为null
前言
通过 jQuery,可以很容易地添加和删除元素。
添加元素
添加元素主要用到四个方法
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
append() 方法在被选元素的结尾插入内容(作为该元素子元素插入)
hello worldJavaScript 学习-37.jQuery 添加/删除/替换元素
领取专属 10元无门槛券
手把手带您无忧上云