Question

我有一个HTML，如下所示

<h1 class="headerLogo headerLogoWith">First <br><i>MyLocation</i><i>- Myscreen</i></h1>

如何更换文字＆＃34; First＆＃34;与任何其他数据。

我试过

 $('.headerLogo').text('Second');

但它取代了整个文本

或者请在html下告诉我如何将它分开以便我可以使用特定的类替换它？

Answer 1

如果可以在您的方案中使用，则使用span标记是最简单的解决方案。

HTML

<h1 class="headerLogo headerLogoWith">
    <span id='lorem'>First</span> <br>
    <i>MyLocation</i>
    <i>- Myscreen</i>
</h1>

JS

$('#lorem').text('second');

http://jsfiddle.net/o14qmjar/

Answer 2

添加带有ID或CLASS的span，然后将其替换

<!-- HTML -->
<h1 class="headerLogo headerLogoWith"><span class="replace">Firts</span> <br><i>MyLocation</i><i>- Myscreen</i></h1>
<!-- JQuery -->
$(".replace").html("New text");

Answer 3

您可以在不将其包装在另一个范围内的情况下执行此操作：

var html = $('.headerLogo').html();
html = html.replace('First ','Second ');
$('.headerLogo').html(html);

Answer 4

你走了为您的文本声明span标记

HTML：

<h1 class="headerLogo headerLogoWith"><span id="text">First </span><br><i>MyLocation</i><i>- Myscreen</i></h1>

JS：

document.getElementById('text').innerHTML="enter your text here";

Answer 5

slime提供的answer链接非常好。我也试过用jQuery如何解决这个问题。这是我的谦虚答案，涉及3行jQuery代码（并不像上面链接中那样实用）：

＆＃13;

$childElements = $('.headerLogo').children().detach();

 $('.headerLogo').text('Second');

 $('.headerLogo').append($childElements);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h1 class="headerLogo headerLogoWith">First <br><i>MyLocation</i><i>- Myscreen</i></h1>

＆＃13;

以上是＆＃34; Second ＆＃34;之前使用的.children()和.detach()方法。值已设置。最后，分离的元素将附加到.headerLogo。

我如何在HTML中分隔标签

5 个答案: