javascript - innerhtml是什么 - jquery replaceall



如何使用jQuery替换div的innerHTML? (8)

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

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

https://src-bin.com

我怎么能实现以下内容:

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

使用jQuery其中regTitle是我的div ID?


Answer #1

html()函数可以采用HTML字符串,并且会有效地修改.innerHTML属性。

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

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

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

Answer #2

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

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

要么

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

Answer #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和脚本中的引用指向正确的对象。


Answer #4

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

但我会建议,你应该使用一些像淡出/淡入的动画来改变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 #5

这是你的答案:

//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 #6
$("#regTitle")[0].innerHTML = 'Hello World';

Answer #7
<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
      $( document ).ready(function() {
        $('.msg').html('hello world');
      });
    </script>

  </head>
  <body>
    <div class="msg"></div>
  </body>
</html>




innerhtml