如何使用jQuery替换div的innerHTML?

我怎样才能做到以下几点:

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

使用jQuery,其中regTitle是我的div id?

1848714 次浏览
$("#regTitle").html("Hello World");

html()函数可以采用超文本标记语言字符串,并将有效地修改.innerHTML属性。

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

但是,text()函数将更改指定元素的(文本)值,但保留html结构。

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

如果您想要呈现一个jQuery对象而不是现有内容:然后只需重置内容并附加新内容。

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

或:

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

以下是您的答案:

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

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

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

答复:

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

说明:

$等效于jQuery。两者都代表jQuery库中的同一个对象。括号内的"#regTitle"称为选择器,jQuery库使用它来识别您要将代码应用于html DOM(文档对象模型)的哪些元素。regTitle之前的#告诉jQueryregTitle是DOM内元素的id。

从那里,点符号用于调用html函数,该函数将内部html替换为您放置在括号之间的任何参数,在本例中为'Hello World'

已经有答案给出了如何更改元素的内部超文本标记语言。

但我建议,你应该使用一些动画,如淡出/淡入来改变超文本标记语言,这会给改变的超文本标记语言带来良好的效果,而不是立即改变内部超文本标记语言。

使用动画更改内部超文本标记语言

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

如果你有很多函数需要这个,那么你可以调用改变内部Html的通用函数。

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

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

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

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

示例

$( 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>

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

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

几年前,我有一个项目,我们试图将大型超文本标记语言/文本设置为各种超文本标记语言元素时遇到了问题。

看来,“重新创建”元素并将其注入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>

Should get you a better performance. I haven't recently tried to measure that (browsers should be clever these days), but if you're looking for performance it may help.

The downside is that you will have more work to keep the DOM and the references in your scripts pointing to the right object.

jQuery有几个处理文本的函数,如果你使用text() one,它会为你完成工作:

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

此外,您可以使用html()代替,如果您有任何html标签

纯JS和最短

纯js

regTitle.innerHTML = 'Hello World'

regTitle.innerHTML = 'Hello World';
<div id="regTitle"></div>

最短

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

// note: no quotes around regTitle$(regTitle).html('Hello World'); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="regTitle"></div>

var abc = document.getElementById("regTitle");abc.innerHTML = "Hello World";