CODEWITHSUNDEEP
javascriptjquery
Dan
Dan

Reputation: 1719

Wrap HTML around text

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>

Upvotes: 1

Views: 101

Answers (4)

Nikita Holovach
Nikita Holovach

Reputation: 306

var word = 'Conference';

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

Upvotes: -1

qwertynl
qwertynl

Reputation: 3933

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

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

Upvotes: 0

DSlagle
DSlagle

Reputation: 1583

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>');
});

Upvotes: 0

display-name-is-missing
display-name-is-missing

Reputation: 4399

Try:

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

Upvotes: 4

Related Questions