Manipulation H1 Tag

Question

I have the following Problem:

<h1 id="title">Text Text Text <br> Second Text Text Text </h1>

How can i change or manipulate the Text after the break-Tag ?

I cant change the HTML itself and it has to be done via JavaScript containing jQuery.

After manipulating it should look like this:

<h1 id="title">Text Text Text <br> <span id="preTitle"> blablabla </span></h1>

Anybody got a solution to this? Thanks in advance

Answer 1

Take the initial html inside h1 tag. Split it by br tag. Adjust the second part of splited html with span tag. Join splited parts with br tag and put them back into h1 tag:

 var html = $("#title").html(); var parts = html.split("<br>"); parts[1] = "<span class='preTitle'>"+parts[1]+"</span>"; $("#title").html(parts.join("<br>")); 

 .preTitle{ color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h1 id="title">Text Text Text <br> Second Text Text Text </h1> 

Answer 2

You can use JQuery:

var titleHtml = $("#title").html().split('<br>');
$("#title").html(titleHtml[0]+"<br><span id='preTitle'>"+titleHtml[1]+"</span>");