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