操纵H1标签

Question

我有以下问题：

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

如何在中断标记后更改或操作文本？

我无法改变HTML本身 ，它必须通过包含jQuery的JavaScript来完成。

操作后它应该如下所示：

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

有人解决了这个问题吗？ 提前致谢

Answer 1

在h1标签内部取最初的html。 用br标签拆分它。 使用span标记调整已拆分html的第二部分。 使用br标记加入拆分的部分并将它们放回到h1标记中：

 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

你可以使用JQuery：

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