JavaScript 克隆内部 HTML，然后基于该克隆文本创建新的 div

Question

棘手的情况。

我需要从 ul li a 选择器复制 3 个元素的内部 html，然后注入(inject)一个新的 div，类名作为复制的内部 html

我设法注入(inject)了一些元素，但我还没有完成所需的工作。 https://jsfiddle.net/gt97vz51/1/

来自 fiddle 的 jQuery:

(function($) {
    $('ul > li').each(function(){
        var html = $(this).html();
        $(this).html('<span class="">' + html + '</span>' + html);
    });
})(jQuery);

这是我需要的实际输出:

<ul> 
    <li><a href="#" class="btn btn-default"><span class="name1"></span>name1</a></li>
    <li><a href="#" class="btn btn-default"><span class="name2"></span>name2</a></li>
    <li><a href="#" class="btn btn-default"><span class="name3"></span>name3</a></li>
</ul>

我更喜欢 JavaScript 解决方案，但如果我能得到 jQuery 解决方案，我仍然会非常高兴。

Answer 1

这是 jQuery 解决方案，具体取决于您想要的输出:

(function($) {
  $('ul > li').each(function() {
    var className = $(this).find('a').text();
    $(this).find('a').prepend('<span class="' + className + '"></span>');
  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#" class="btn btn-default">name1</a>
  </li>
  <li><a href="#" class="btn btn-default">name2</a>
  </li>
  <li><a href="#" class="btn btn-default">name3</a>
  </li>
</ul>