使用getElementByClassName在特定元素中设置Text

set Text in specific element using getElementByClassName

本文关键字：设置 Text 元素 getElementByClassName 使用      更新时间：2023-09-26

我有一个名为p1的类，我给了几个段落。

现在我想要得到第一个并更改其文本。

我试过这样的东西：

var p = document.getElementsByClassName("p1");
p[0].text("hello");

或

p[0].innerHtml = "hello";

不是p[0].innerHtml = "hello";将其更改为p[0].innerHTML = "hello";

var p = document.getElementsByClassName("p1");
p[0].innerHTML = "hello";
<div class="p1"></div>

REF:Element.innerHTML

当您在问题中被标记为jQuery时，您可以使用html()或text()

$('.p1').html('hello');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="p1"></div>

在我看来，你有三个选项可以做你想做的事：

  • 您可以简单地使用jQuery的eq函数（文档）：

    $(".p1").eq(0).text("hello");

  • 或者，您可以像在示例中那样使用DOM API（但如果您已经使用jQuery，我建议您保持一致性并坚持使用它），然后将DOM元素转换为jQuery元素：

    var p = document.getElementsByClassName("p1"); $(p[0]).text("hello");

  • 或者只使用普通的DOM API，但使用innerText（顺便说一句，如果向元素插入任何文本，请记住始终使用innerText，以避免代码注入等问题（您可以在此处阅读更多信息）：

    var p = document.getElementsByClassName("p1"); p[0].innerText = "hello";

查看此fiddle中的所有示例

相关文章：