点击Add Row按钮时，如何调用id为addObjectForm的div元素？

嘿，很高兴能帮到你！要实现点击「Add Row」按钮时调用（操作）id为addObjectForm的div元素，其实很简单，下面给你两种常用的实现方式，你可以根据项目技术栈选择：

方法1：原生JavaScript实现（无依赖） #

这是最基础的方式，不需要引入任何第三方库，直接用浏览器原生API就能完成：

// 先获取按钮和目标div元素
const addRowBtn = document.getElementById('addRowButton');
const addObjectForm = document.getElementById('addObjectForm');

// 给按钮绑定点击事件监听器
addRowBtn.addEventListener('click', function() {
  // 在这里写你需要对addObjectForm执行的操作，举几个例子：
  // 1. 切换元素的显示/隐藏状态
  addObjectForm.style.display = addObjectForm.style.display === 'none' ? 'block' : 'none';
  
  // 2. 往div里添加新的内容（比如新增一行表单元素）
  addObjectForm.innerHTML += `
    <div class="col-sm-12 mt-2">
      <input type="text" placeholder="新输入项">
    </div>
  `;
  
  // 3. 给div添加样式类
  addObjectForm.classList.add('active-form');
});

关键说明： #

• document.getElementById()：通过元素ID直接获取DOM元素，这是最高效的方式之一
• addEventListener('click', ...)：给按钮绑定点击事件，当用户点击时触发回调函数
• 在回调函数里，你可以根据需求对addObjectForm进行任何DOM操作——显示/隐藏、修改内容、添加样式等等

方法2：jQuery实现（如果项目已引入jQuery） #

如果你的项目已经在用jQuery，代码会更简洁：

// 给按钮绑定点击事件
$('#addRowButton').click(function() {
  // 获取目标div元素
  const $addObjectForm = $('#addObjectForm');
  
  // 示例操作：
  // 1. 切换显示/隐藏（jQuery的toggle()方法会自动处理状态）
  $addObjectForm.toggle();
  
  // 2. 追加新内容到div末尾
  $addObjectForm.append(`
    <div class="col-sm-12 mt-2">
      <input type="text" placeholder="新输入项">
    </div>
  `);
  
  // 3. 添加样式类
  $addObjectForm.addClass('active-form');
});

关键说明： #

• jQuery的选择器$('#元素ID')可以快速获取DOM元素
• click()方法是jQuery绑定点击事件的简化写法
• 内置的toggle()、append()等方法可以让DOM操作更省心

不管用哪种方式，核心逻辑都是：先获取按钮元素，绑定点击事件，在事件触发的回调函数中获取目标div并执行你需要的操作。

内容的提问来源于stack exchange，提问作者BMAM