1016

我如何实现以下目标：

document.all.regTitle.innerHTML = 'Hello World';

使用jQuery regTitle我的div ID 在哪里？

— 托尼夫
source

1528

$("#regTitle").html("Hello World");

— 泽德
source

320

在HTML（）函数可以利用HTML的字符串，将有效地改变.innerHTML性质。

$('#regTitle').html('Hello World');

但是，text（）函数将更改指定元素的（text）值，但保留html结构。

$('#regTitle').text('Hello world');

— 僵尸
source

12

“但保留html结构”。你可以解释吗？

— Anoop Joshi

10

与jQuery API文档（api.jquery.com/text）text()不同的是：Unlike the .html() method, .text() can be used in both XML and HTML documents.。此外，根据stackoverflow.com/questions/1910794/...，jQuery.html() treats the string as HTML, jQuery.text() treats the content as text。

— Gorgsenegger '16

1

@AnoopJoshi stackoverflow.com/questions/1910794/...

— Machavity

68

如果您有一个jquery对象而不是现有内容，则要呈现：然后重置内容并附加新内容。

var itemtoReplaceContentOf = $('#regTitle');
itemtoReplaceContentOf.html('');
newcontent.appendTo(itemtoReplaceContentOf);

要么：

$('#regTitle').empty().append(newcontent);

— 电影院
source

17

使用的好地方itemtoReplaceContentOf.empty();

— Kevin Panko

是newcontentjQuery对象吗？这还不清楚。

— kmoser

@kmoser在第一个示例中，newcontent确实是一个jquery对象。在第二示例中它可以是类型的htmlString或Element或Text或Array或jQuery按api.jquery.com/append

— 电影

27

这是您的答案：

//This is the setter of the innerHTML property in jQuery
$('#regTitle').html('Hello World');

//This is the getter of the innerHTML property in jQuery
var helloWorld = $('#regTitle').html();

— 丹犬
source

11

回答：

$("#regTitle").html('Hello World');

说明：

$等同于jQuery。两者在jQuery库中代表相同的对象。在"#regTitle"括号内被称为选择它使用jQuery库，以确定要应用代码的HTML DOM（文档对象模型）的哪一个元素（一个或多个）。在#之前regTitle告诉jQuery的这regTitle是DOM中的元素的ID。

从此处开始，点符号用于调用html函数，该函数用您在括号之间放置的任何参数（在本例中为）替换内部html 'Hello World'。

— Webeng
source

11

已经有给出如何更改元素内部HTML的答案。

但是我建议，您应该使用诸如Fade Out / Fade In之类的动画来更改HTML，这样可以很好地更改HTML，而不是立即更改内部HTML。

使用动画更改内部HTML

$('#regTitle').fadeOut(500, function() {
    $(this).html('Hello World!').fadeIn(500);
});

如果您有许多需要此功能的函数，则可以调用更改内部HTML的通用函数。

function changeInnerHtml(elementPath, newText){
    $(elementPath).fadeOut(500, function() {
        $(this).html(newText).fadeIn(500);
    });
}

— 索南斯·穆鲁克（Somnath Muluk）
source

11

您可以在jQuery中使用html或text函数来实现它

$("#regTitle").html("hello world");

要么

$("#regTitle").text("hello world");

— 吉滕德拉·瓦什尼
source

9

jQuery .html()可以用于设置和获取匹配的非空元素（innerHTML）的内容。

var contents = $(element).html();
$(element).html("insert content into element");

— 普拉蒂克
source

html之后的打开和关闭括号救了我。因此，请记住，这两个都很重要。

— Gellie Ann

9

例

$( document ).ready(function() {
  $('.msg').html('hello world');
});

    <!DOCTYPE html>
    <html>
      <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>    
      </head>
      <body>
        <div class="msg"></div>
      </body>
    </html>

展开摘要

— Nikit Barochiya
source

7

$("#regTitle")[0].innerHTML = 'Hello World';

— 阿尔·贝贝隆·托梅
source

3

只是为了添加一些性能见解。

几年前，我有一个项目，在尝试将大型HTML /文本设置为各种HTML元素时遇到了问题。

看起来，“重新创建”元素并将其注入DOM比任何建议的更新DOM内容的方法要快得多。

所以像：

var text = "very big content";
$("#regTitle").remove();
$("<div id='regTitle'>" + text + "</div>").appendTo("body");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

展开摘要

应该可以给您带来更好的表现。我最近没有尝试过衡量（浏览器现在应该很聪明），但是如果您正在寻找性能，它可能会有所帮助。

缺点是您将需要做更多的工作来保持DOM和脚本中的引用指向正确的对象。

— 帕维尔·唐切夫（Pavel Donchev）
source

3

jQuery很少有处理文本的功能，如果您使用text()一个，它将为您完成这项工作：

$("#regTitle").text("Hello World");

另外，html()如果您有任何html标记，也可以使用...

— 阿里雷扎
source

如何使用jQuery替换div的innerHTML？

使用动画更改内部HTML