如何用JQuery实现错误提示表格并插入指定DIV？

你的问题出在分步插入DOM元素时，可能遇到了新插入元素无法被即时选中的情况。咱们来调整下代码，两种方案都能解决你的问题：

方案1：一次性插入完整表格结构（推荐） #

直接把整个表格的HTML结构一次性插入到#errorMessage中，既简洁又避免了分步查找元素的问题，而且用ES6模板字符串不用转义引号，可读性更高：

$("#errorMessage").append(`
  <table id="error" style="width:900px;border-top: 1px Solid #B7B7B7;border-right: 1px Solid #B7B7B7; border-left: 1px Solid #B7B7B7;border-collapse: collapse;background-color:#E7E7E7;height:auto;">
    <tr>
      <td style="color:#CC0000;"> Een of meerdere verplichte velden ontbreken. </td>
    </tr>
  </table>
`);

方案2：分步操作但直接操作DOM变量 #

如果一定要分开创建表格和内容，可以先把创建的表格元素存在变量里，直接对变量进行操作，不用通过ID查找，这样就不会出现找不到元素的问题：

// 先创建表格元素并保存到变量
const errorTable = $("<table id='error' style='width:900px;border-top: 1px Solid #B7B7B7;border-right: 1px Solid #B7B7B7; border-left: 1px Solid #B7B7B7;border-collapse: collapse;background-color:#E7E7E7;height:auto;'></table>");

// 给表格添加行和提示文本
errorTable.append("<tr><td style='color:#CC0000;'>Een of meerdere verplichte velden ontbreken.</td></tr>");

// 最后把表格插入到目标容器中
$("#errorMessage").append(errorTable);

为什么原来的代码可能失效？ #

当你执行$("#error").append(...)时，虽然表格已经被插入到DOM，但在某些同步执行的场景下，jQuery的选择器可能无法立即捕获到这个刚插入的新元素。而上面的两种方法要么一次性完成插入，要么直接操作已创建的DOM对象，就避开了这个问题。

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