插入新元素后如何操作DOM？

Question

我目前正在WooCommerce / WordPress网站上工作，在结帐页面上，当我提交表单时，它通过Ajax提交，如果有错误（必填字段未填写等），页面会插入一些html并列出需要填写的字段。

我有一些jQuery将页面中新插入的html放到页面上的新位置，但它不起作用。

在提交时插入的WooCommerce代码（如果错误）：

<ul class="woocommerce-error">
    <li><strong>First Name</strong> is a required field.</li>
</ul>

我的代码：

var wc_errors = jQuery('ul.woocommerce-error');
jQuery('.errors_placeholder').append(wc_errors);

还可以注意到我的JavaScript文件是在WooCommerce JavaScript文件之前加载的。

Answer 1

尝试以下方法：

$(document).ready(function() {
    var wc_errors = $('ul.woocommerce-error');
    $('.errors_placeholder').appendTo(wc_errors);    
});

你需要在$（document）.ready函数中告诉jQuery DOM已准备就绪。

查看我的example