获取 div 内容并将其显示为最后一个不起作用"li"

Question

我试图获得div的内容，并将它们显示为ul上的最后一个li，用于移动菜单。内容的标记是用php生成的，所以我不能简单地附加html。

我已经尝试使用sethtml和append没有成功。

这是我的尝试:

$("#mobile-menu li").last().append($("#header-top-widget-area-2 div").innerHTML);

下面是用php生成的标记，我需要在移动菜单中显示为最后一个li:

<div class="ewf-span6 text-right" id="header-top-widget-area-2">
  <div id="text-3" class="widget widget_text">
    <h3 class="widget-title"><span> </span></h3>
    <div class="textwidget">
      <ul class="social-icons">
        <li class="facebook"><a href="#"><img class="social-icon" src="/wp-content/uploads/2014/05/fb_responsive.png" alt="facebook-icon"></a></li>
        <li class="linkedin"><a href="#"><img class="social-icon" src="/wp-content/uploads/2014/05/linkedin_responsive.png" alt="linkedin-icon"></a></li>
        <li class="twitter"><a href="#"><img class="social-icon" src="/wp-content/uploads/2014/05/twitter_responsive.png" alt="twitter-icon"></a></li>
      </ul>
      <ul class="green-menu">
        <li><a href="#">Contact Us</a></li>
        <li class="border"><a href="#">Blog</a></li>
      </ul>
    </div>
  </div>
</div>

Answer 1

您需要创建一个新的<li>元素，用您的内容填充它，并将它附加到您的<ul>元素:

var newLi = $("<li />");
newLi.html($("#header-top-widget-area-2 div")[0].innerHTML);
$("#mobile-menu").append(newLi);