Wrap HTML around text

Question

This is not ideal, but I am running out of options on trying to wrap some HTML around a heading that I have. It is possible at all to target a header text and wrap HTML around that text?

Starting text:

<div class="header-intro-text">
   <h1>New Business Conference</h1>
 </div>

Ending Text with added HTML

<div class="header-intro-text">
   <h1><a href="#">New Business Conference</a></h1>
 </div>

Answer 1

尝试：

$(".header-intro-text h1").wrapInner('<a href="#"></a>');

Answer 2

You should be able to do the following with jQuery:

$('h1').html('<a href="#">' + $('h1').text() + '</a>');

or for multiple headers

$('h1').each(function() {
    $(this).html('<a href="#">' + $(this).text() + '</a>');
});

Answer 3

var hit = $('.header-intro-text h1');
var hitText = hit.text();
hit.html($('<a href="#"></a>').text(hitText));

Demo: http://jsfiddle.net/qwertynl/reV9V/

Answer 4

var word = 'Conference';

function highlight(word){
    var $container = $('.header-intro-text');
    $container.html(
        $container.html().replace(word, '<a href="#">'+word+'</a>')
    );
}