How to append a div inside an appended div-CodePudding

    $.each(v.Modifiers, function (_k, _v) {
      $modifierDiv.append(
        `<div  style="padding: 0;" data-id="${_v.ModifierOptionID}">
          <p  style="padding: 5px; margin: 0; line-height: 14px;">
            ${_v.ModifierOption.Name   " "   formatCurrency(_v.TotalPrice)}
          </p>
        </div>`
      );
    });

    $(".cart-items-right").find('ul').append(
      `<div >
        <li  data-order-line-id="${obj.OrderLineID}" data-id="${obj.ID}" data-qty="${obj.Qty}" data-remarks="${obj.Remarks}" data='${JSON.stringify(obj)}'>
          <div >
              <div  style="padding: 0;">
                <span  style="padding:5px 0px;margin:0px;line-height:14px;">
                  ${common.translate("Regular")   " "  formatCurrency(obj.Price)}
                </span>
              </div>
              <div  style="margin: 8px 0;">${$modifierDiv}</div>
            </div>
          </div>
        </li>
      </div>`
    );

I appended $modifierDiv inside a div that also append to .cart-items-right. But it just returned me [Object Object]. Need help. Thanks

CodePudding user response：

You can create a jQuery object for the <li> then append within that object

Simplified example:

const $div = $('<div>',{text:'My Div'})

const $li = $(`<li><div ></div></li>`);
               
$li.find('.hidden').append($div)

$('ul').append($li)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul></ul>