如何使用jQuery替换/更改<h3></h3>标签内的标题文本？

Question

如何使用jQuery替换/更改<h3></h3>标签内的标题文本？

54

我该如何使用 JavaScript 更改/替换 <h3> 中的文本：“Featured Offers”，使其变为“Public Offers”？

</div>  <!-- FEATURED OFFERS -->
<div class="panel">
   <div class="head">
      <h3>Featured Offers</h3>
   </div>
   <div class="body">
      <table>
         <thead>
            <tr>

- James Freeberg

我没有访问HTML代码的权限，顺便说一下。 - James Freeberg

文档中还有其他<h3>标签。我该如何仅切换<h3>Featured Offers</h3>而不是其他H3标签？ - James Freeberg

这些<h3>标签是不是在其他<div class="head">中？ - talnicolas

10个回答

39

不要这样写: 不要这样写。给你的标签加一个id，比如现在看起来是这样的:

<h3 id="myHeader"></h3>

接着像这样设定数值：

myHeader.innerText = "public offers";

- barak ben horin

1

嗯，我相信你会。而且jQuery比纯JavaScript更容易一些。 - talnicolas

一般来说，你是对的。但在我看来，在这个特殊情况下不是这样的。总是给标签贴上标签是非常重要的，如果不是给<h3>至少给<head>，这样就不会有任何错误了。无论如何，如果你没有权限，我猜你可以使用talnicolas的建议。祝你们朋友们有美好的一天。 - barak ben horin

这确实是唯一解决问题而不会潜在地创建更多问题的答案。如果您使用其他方法，您只会随意更改其他标题，而这些标题可能是该人稍后决定添加的。 - Brad

这个解决方案对我很有效，比其他所有的都好。感谢：@barak ben horin - Rashmy

我有多个h3，所以这似乎是最好的解决方案，但我使用.text('some value')而不是innerText。 - Gerry

这是jQuery语法吗？从未见过将id作为object的情况。它能正常工作吗？ - Timo

28

$("h3").text("context")

只需使用"text()"方法。

"text()"方法不能用于表单输入或脚本。要设置或获取输入或文本区域元素的文本值，请使用"val()"方法。要获取脚本元素的值，请使用"html()"方法。

http://api.jquery.com/text/

- Jie

1

请注意，如果存在多个<h3>元素，则此操作将设置每个元素的文本内容。 - dakab

17

在h3标签中添加id属性，例如：

<h3 id="headertag">Featured Offers</h3>

在 JavaScript 函数中这样做：

document.getElementById("headertag").innerHTML = "Public Offers";

- ishanbakshi

12

试试这个：

$(".head h3").html("New header");

或者

$(".head h3").text("New header");

记住类选择器会返回所有匹配的元素。

- Chamika Sandamal

10

类似以下这样：

$(".head h3").html("Public offers");

- talnicolas

1

jQuery(document).ready(function(){
   jQuery(".head h3").html('Public Offers');
});

- Deepak kumar Saini

4

虽然这段代码可能能回答问题，但最好加入一些背景说明，解释它的工作原理以及何时使用它。仅仅给出代码并不长久实用。 - Daniel Puiu

我认为没有必要解释，因为这是一个基本的JavaScript概念。 - Deepak kumar Saini

1

早上好@DeepakkumarSaini，记住即使是基础知识也能提高我们的知识水平。 - Jorge

这个解决方案已经有三个答案在这里发布了，而且是7年前的事情。真的没有必要再发一个答案了。 - Sergio Tulentsev

0

你可以尝试：

var headingDiv       = document.getElementById("head");
headingDiv.innerHTML = "<H3>Public Offers</H3>";

- Shades88

示例中的“head” div没有“id”。因此，a）这不起作用，b）是错误的解决方案。 - Sergio Tulentsev

哦哦哦...你是对的。我看错了。head是一个类。那么最好是给H3或包含它的div分配一个id，然后这样做。你觉得呢？ - Shades88

1

我个人会分配一个ID，但是你的解决方案本来就是错误的。它覆盖了head div的整个内容。 - Sergio Tulentsev

0

如果你正在使用JQuery，你可以使用以下代码片段。

onSomethingChange() {
  $("#your_element_id").text("the text you want to be appeared")
}

这是如果您根据某些事件更改HTML元素，并且文本方法中的字符串可以替换为像以下片段中的另一个元素值的情况

onSomethingChange() {
  $("#your_element_id").text($("#your_other_element_id").val())
}

但请记住，只有在将id添加到HTML元素中时才有效，不要将其用作像输入这样的字段。

- mohamed hassan

-1

希望能对某些人有所帮助：-

具有"className"值的类属性元素：

<h3 class="className"></h3>

你将通过类名进行引用：

const newTitle = document.querySelector(".className");

然后更改内容：

newTitle.textContent = "New Title";

- Abdallah

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sergio Tulentsev · Accepted Answer

如果您可以选择它，那么您就可以操作它。

尝试这个：

$(".head h3").html("your new header");

但正如其他人所提到的，你可能想让 head div 具有一个id。