要将按钮容器插入到 contractLabel 的前面（即它的上一个兄弟节点），可以使用 insertBefore 方法将按钮容器插入到 contractLabel 本身之前。
在 JavaScript 中，您可以通过以下方式修改代码：
修改代码示例
// 找到包含合同信息的标签，例如通过其 class 或 id 选择器
const contractLabel = document.querySelector('label.contract-info'); // 请根据实际情况修改选择器
if (contractLabel) {
// 创建按钮容器
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>
`;
// 将按钮容器插入到合同部分（label 上面）
contractLabel.parentNode.insertBefore(buttonContainer, contractLabel);
// 添加点击事件处理函数
buttonContainer.querySelectorAll('.btn').forEach(button => {
button.addEventListener('click', function() {
const action = this.getAttribute('data-action');
switch (action) {
case 'action1':
console.log('按钮1被点击');
break;
case 'action2':
console.log('按钮2被点击');
break;
case 'action3':
console.log('按钮3被点击');
break;
case 'action4':
console.log('按钮4被点击');
break;
default:
break;
}
});
});
} else {
console.log('未找到合同信息标签');
}
关键变化
- 插入位置：我们将
contractLabel.parentNode.insertBefore(buttonContainer, contractLabel);放在了条件语句内部，这样会确保创建的buttonContainer在目标标签contractLabel前面。
确保按顺序加载
如果此脚本仍然没有按预期工作，请确保：
- 您的 JavaScript 在 DOM 加载完成后执行。如果您的
<script>标签放在<head>部分，请考虑使用如下方法：
document.addEventListener("DOMContentLoaded", function() {
// 将上述代码放在这里...
});
- 检查是否存在多个具有相同类名的元素，以确保您选择的是正确的元素。
通过这些调整，您应该能够把新的按钮容器放置在您希望的位置。
内容由零声教学AI助手提供，问题来源于学员提问
&1 请帮我分析有什么问题，这是在操作shar..." />
