如何使用jQuery替换div的innerHTML?

2020/09/18 21:01 · javascript ·  · 0评论

我如何实现以下目标:

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

使用jQuery regTitle我的divID 在哪里

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

HTML()函数可以利用HTML的字符串,将有效地改变.innerHTML性质。

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

但是,text()函数将更改指定元素的(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 jQuery
var helloWorld = $('#regTitle').html();

回答:

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

说明:

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

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

已经有给出如何更改元素内部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);
    });
}

您可以在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>

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

var contents = $(element).html();
$(element).html("insert content into element");
$("#regTitle")[0].innerHTML = 'Hello World';

仅添加一些性能见解。

几年前,我有一个项目,在尝试将大型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和脚本中的引用指向正确的对象。

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

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

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

纯JS和最短

纯JS

regTitle.innerHTML = 'Hello World'

最短的

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

本文地址:http://javascript.askforanswer.com/ruheshiyongjquerytihuandivdeinnerhtml.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!