jQuery的变化嵌套的HTML元素

Question

我有一个错误的生成一段HTML代码：

<h1 class="title">Some Value 
    <a href="#">link1</a> 
    <a href="#">link2</a> 
    <a href="#">link3</a> 
    <a href="#">link4</a> 
</h1> 

我怎么能在运行时改变这种使用jQuery，这将是这样的：

<h1 class="title">Some Value</h1> 
<p> 
    <a href="#">link1</a> 
    <a href="#">link2</a> 
    <a href="#">link3</a> 
    <a href="#">link4</a> 
</p> 

附： h1元素中可以有任意数量的链接。

Answer 1

$('.title').after($('<p>').append($('.title').children())).html($('.title').text().trim()); 

编辑：如果您有多个< H1>元素，可以循环通过他们：

$(function() { 
 
    $('.title').each(function() { 
 
    $(this).after($('<p>').append($(this).children())).html($(this).text().trim()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h1 class="title">Some Value 
 
    <a href="#">link1</a> 
 
    <a href="#">link2</a> 
 
    <a href="#">link3</a> 
 
    <a href="#">link4</a> 
 
</h1>

Answer 2

我不知道如果每个h1元素将有'title'所以我实施了每个h1实例。

$("h1").each(function() { 
    var innerhtml = "<p>"; 
    $(this).find("a").each(function() { 
     innerhtml += $(this).html(); 
    }); 
    innerhtml += "</p>"; 
    $(this).html(innerhtml); 
}); 

Answer 3

到HTML

<h1 class="title">Some Value 
    <a href="#">link 1</a> 
    <a href="#">link 2</a> 
    <a href="#">link 3</a> 
    <a href="#">link 4</a> 
</h1> 

脚本：

$(document).ready(function() { 
    var links = $('h1.title a'); 
    $('h1.title').after('<p class="movehere"></p>'); 
    $('p.movehere').append(links); 
    $('h1.title a').remove(); 
}); 

http://codepen.io/anon/pen/KpjbpM