在JavaScript中,可以通过以下代码清理并创建一个按钮列表,以显示特定的信息并删除其他内容:
// 获取按钮列表容器
const buttonContainer = document.getElementById('button-container');
// 清空按钮列表容器
buttonContainer.innerHTML = '';
// 创建按钮列表
const buttonList = [
{ text: '按钮1', info: '信息1' },
{ text: '按钮2', info: '信息2' },
{ text: '按钮3', info: '信息3' },
];
buttonList.forEach((buttonData) => {
// 创建按钮元素
const button = document.createElement('button');
button.textContent = buttonData.text;
// 添加按钮点击事件
button.addEventListener('click', () => {
// 清空其他内容
buttonContainer.innerHTML = '';
// 显示特定信息
const infoElement = document.createElement('p');
infoElement.textContent = buttonData.info;
buttonContainer.appendChild(infoElement);
});
// 将按钮添加到列表容器中
buttonContainer.appendChild(button);
});
这段代码首先通过getElementById
方法获取按钮列表容器的引用,然后使用innerHTML
属性将容器内容清空。接下来,创建一个按钮列表的数组buttonList
,其中每个按钮对象包含按钮文本和对应的信息。
通过forEach
方法遍历buttonList
数组,对于每个按钮对象,创建一个button
元素,并设置其文本内容为按钮文本。然后,为每个按钮添加一个点击事件监听器,当按钮被点击时,清空按钮列表容器的内容,并根据按钮对象的信息创建一个p
元素,将其添加到按钮列表容器中。
最后,将每个按钮添加到按钮列表容器中,完成按钮列表的创建和显示特定信息的功能。
这段代码的应用场景可以是在网页中需要根据不同按钮显示不同信息的情况,比如一个产品列表页面,点击不同的按钮可以显示对应产品的详细信息。
推荐的腾讯云相关产品:无
领取专属 10元无门槛券
手把手带您无忧上云