如何将jQuery内容包裹在H标签中？

Question

在我附加在 jQuery 中的某些内容周围获取 <h3> 标签时遇到一些麻烦。

真的很简单，每个带有 class .gallery-icon 的 div 都会附加其包含的锚点 title 属性。

$(document).ready(function($) {

    $(".gallery-icon").each(function() {

        $(this).append($(this).find('a').attr('title'));

    });

});

我面临的问题是 title 只是在没有任何标签的情况下插入，即：

<div class="gallery-icon">
  <a title="Yadda!" href="http://cdn.someecards.com/someecards/usercards/1343964507704_8609552.png"><img src="http://cdn.someecards.com/someecards/usercards/1343964507704_8609552.png" alt="Yadda!"></a>
  Yadda!</div>

注意：Yadda! 只是坐在画廊图标 div 中，没有任何标签。我想要它包裹在 h3 中。

理想情况下应该是：

<div class="gallery-icon">
  <a title="Yadda!" href="http://cdn.someecards.com/someecards/usercards/1343964507704_8609552.png"><img src="http://cdn.someecards.com/someecards/usercards/1343964507704_8609552.png" alt="Yadda!"></a>
  <h3>Yadda!</h3>
</div>

Answer 1

改变这个：

$(this).append($(this).find('a').attr('title'));

对此：

$(this).append($('<h3/>', {text: $(this).find('a').attr('title')}));

或者这个：

$('<h3/>', {
   text: $(this).find('a').attr('title')
}).appendTo(this);

$(".gallery-icon").each(function(i, elem) {
  $('<h3/>', {
    text:$(this).find('a').attr('title')
  }).appendTo(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="gallery-icon">
  <a title="Yadda!" href="http://cdn.someecards.com/someecards/usercards/1343964507704_8609552.png">
    <img src="http://cdn.someecards.com/someecards/usercards/1343964507704_8609552.png" alt="Yadda!">
  </a></div>

连这个都可以做到：

$(this).append('<h3>'+ $(this).find('a').attr('title') + '</h3>');

如何将jQuery内容包裹在H标签中？

How to wrap jQuery content in H tags?

javascript

jquery

append