要将按钮添加到特定的元素中（如 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助手提供，问题来源于学员提问
