如何使用jquery在另一个元素内添加元素

Question

嘿，我正在尝试使用 jquery 在 <li> 中添加 <a> 标记，但我正在努力寻找正确的方法。 这是我的代码示例：

$dropdown.find('ul').append($('<li></li>').append($('<a></a>'))
    .attr('href', $option.val())
    .attr('data-display', (display || null))
    .addClass('option ' + customClassEtay +
    ($option.is(':selected') ? ' selected' : '') +
    ($option.is(':disabled') ? ' disabled' : ''))
    .html($option.text())

Answer 1

您可以直接将其添加到列表项字符串中。

Answer 2

作为参考，以这种方式将 html 附加到元素将需要 .appendTo() 方法。

$('<li><a></a></li>').appendTo('ul').otherChainableMethods();

如果我不得不猜测，你可能正在尝试做这样的事情：

$dropdown.on('change', function() {
  let $option = $(this).find('option:selected');

  $('ul') //most likely not a child of the $dropdown
    .append(`<li><a class="option ${customClassEtay}" data-display="${display || null}" href="${$option.val()}">${$option.text()}</a></li>`);
;})

如果您选择它，该选项将为:selected，并且在disabled 时不可选择，所以我不确定您要在那里做什么。

`${}` 是template literals。

Answer 3

您正在尝试将<a></a> 添加到<li></li> 中，对吗？但是从您上面的代码中它不起作用，为什么？因为<li></li> 还没有插入到DOM 树中

尝试这样做

$('#someElem').append('<li></li>').delay(3000).append('<a></a>')

这应该可行！

重新定义解决方案

这是在 JQuery Official Website 上测试的

$('#testingInsert')
// insert the list elem into the <ul> tag with an id that uniquely identified it
.append("<li id='listItem1'>New List Item2</li>")
// fade the newly added list item 
.fadeOut(function(){ 
     // Now search for that newly added list item and add the <a> to into it
     $(this)
    .find('#listItem1')
    .append('<a href="#snoop">A tag elem </a>');

    // That's it, it work perfectly 
}).fadeIn();

我希望这可以帮助您实现您想要实现的目标，因为这只是完成任务的方法。