CODEWITHSUNDEEP
javascriptjqueryhtml
Snackaholic
Snackaholic

Reputation: 610

Manipulation H1 Tag

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

Upvotes: 3

Views: 259

Answers (2)

tcharaf
tcharaf

Reputation: 630

You can use JQuery: 

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

Upvotes: 0

Timur Osadchiy
Timur Osadchiy

Reputation: 6229

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>

Upvotes: 4

Related Questions