javascript - 操纵 H1 标签

Question

我有以下问题:

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

如何更改或操作 break-Tag 后的文本？

我无法更改 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>