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> 

P.S. Внутри элемента h1 может быть любое количество ссылок.

Answer 1

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

Edit: Если у вас есть несколько < 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