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>");

操纵H1标签

2 个答案: