要将按钮添加到特定的元素中（如 keyInfo 的第二个合同展示部分），首先需要确保能够访问该部分的 DOM 元素。你可以使用 document.querySelector 或其他 DOM 操作方法来找到目标元素。以下是一个示例，演示如何将按钮容器插入到具有特定 ID 或类名的元素中：
假设你的 HTML 结构如下：
<div id="keyInfo">
<div class="contract-section">合同展示1</div>
<div class="contract-section">合同展示2</div>
</div>
你可以修改你的 JavaScript 代码，以便将按钮添加到 合同展示2 中，如下所示：
for (const item of jsonRes) {
if (item.code === 'customerInfo') {
// 客户信息展示
}
if (item.code === 'loan') { // 合同展示
const buttonContainer = document.createElement('div');
buttonContainer.innerHTML = `
<div class="button-container">
<button class="btn" data-action="action1">按钮1</button>
<button class="btn" data-action="action2">按钮2</button>
<button class="btn" data-action="action3">按钮3</button>
<button class="btn" data-action="action4">按钮4</button>
</div>
`;
// 找到 "合同展示2" 部分，可以通过 ID 或类名选择
const contractSection = document.querySelector('#keyInfo .contract-section:nth-of-type(2)');
// 将按钮容器添加到第二个合同展示部分
if (contractSection) {
contractSection.appendChild(buttonContainer);
buttonContainer.querySelectorAll('.btn').forEach(button => {
button.addEventListener('click', function() {
const action = this.getAttribute('data-action');
switch (action) {
case 'action1':
console.log('按钮1被点击');
// 执行按钮1的操作
break;
case 'action2':
console.log('按钮2被点击');
// 执行按钮2的操作
break;
case 'action3':
console.log('按钮3被点击');
// 执行按钮3的操作
break;
case 'action4':
console.log('按钮4被点击');
// 执行按钮4的操作
break;
default:
break;
}
});
});
} else {
console.error("未找到第二个合同展示部分");
}
}
}
在这个代码段中，document.querySelector('#keyInfo .contract-section:nth-of-type(2)') 用于选择 #keyInfo 下的第二个 .contract-section 元素。如果这个元素存在，那么就会将创建好的 buttonContainer 插入其中。
如果你有其他方式识别那个区域，请根据实际情况进行调整。
内容由零声教学AI助手提供，问题来源于学员提问
