javascript - jquery 将 html 拆分为几个 .append

Question

我正在使用 jquery 和 jQWidgets 和选项卡进行一些测试。

我将在循环中使用 jquery .append 创建选项卡的 html 结构，但我收到有关 jQwidget 中结构的错误消息。问题是我如何附加 html。

这个例子只是为了模拟我的循环中发生的事情。

如果我像这样添加html

$('#jqxTabs').append('<ul><li>test</li><li>testar</li></ul><div id="test"></div><div id="testar"></div>');

然后它就可以工作了，但是如果我分几个步骤添加 html，那么我会从 jQwidget 收到错误

$('#jqxTabs').append('<ul>');
$('#jqxTabs').append('<li>test</li><li>testar</li>');
$('#jqxTabs').append('</ul>');
$('#jqxTabs').append('<div id="test"></div><div id="testar"></div>');

也许这是一些基本的 jquery 限制？

Answer 1

DOM不是这样工作的，您不能单独附加/插入开始和结束标记。您应该将元素的表示传递给append方法，以便它可以创建元素。

$('<ul></ul>') // generate an `ul` element
     .append('<li>test</li><li>testar</li>') // append some `li` elements to it
     .appendTo('#jqxTabs'); // append the `ul` to the target object

正如 @DavidThomas 在评论部分中提到的，您还可以将对象传递给 jQuery，它将使用它向生成的元素添加属性和属性:

$('<ul/>', {
    html: '<li>test</li><li>testar</li>' // jQuery calls the `html` method behind the scenes
}).appendTo('#jqxTabs');