使用动画更改内部HTML

Question

我怎样才能实现以下目标：

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

使用jQuery regTitle是我的div ID？

Answer 1

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

Answer 2

html()函数可以使用HTML字符串，并有效地修改.innerHTML属性。

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

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

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

Answer 3

如果您想要渲染jquery对象而不是现有内容。然后只需重置内容并附加新内容。

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

或者：

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

Answer 4

这是你的答案：

//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();

Answer 5

<强>答案：

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

<强>解释

$相当于jQuery。两者都代表jQuery库中的相同对象。括号内的"#regTitle"称为选择器，jQuery库使用它来标识要将代码应用到的html DOM（文档对象模型）的哪个元素。 #之前的regTitle告诉jQuery regTitle是DOM中元素的id。

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

Answer 6

已经有答案提供了如何更改元素的内部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);
    });
}

Answer 7

你可以在jquery中使用html或text函数来实现它

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

OR

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

Answer 8

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

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

Answer 9

示例

＆＃13;
＆＃13;
$( document ).ready(function() { $('.msg').html('hello world'); });
＆＃13;
<!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>
＆＃13;
＆＃13;
＆＃13;

Answer 10

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

Answer 11

只是添加一些性能见解。

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

看来，＆＃34;重新创造＆＃34;元素并将其注入DOM比任何建议的更新DOM内容的方法都要快。

类似于：

＆＃13;

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

＆＃13;

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

＆＃13;

应该让你获得更好的表现。我最近没有尝试过测量（浏览器现在应该很聪明），但是如果你正在寻找性能，它可能有所帮助。

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

Answer 12

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

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

如果您有任何 html标记 ...

，也可以改用html()

Answer 13

纯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>

Answer 14

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

如何使用jQuery替换div的innerHTML？

14 个答案:

使用动画更改内部HTML

纯JS和最短