如何使用jQuery替换div的innerHTML?

ton*_*nyf 984 html javascript jquery innerhtml

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

document.all.regTitle.innerHTML = 'Hello World';
Run Code Online (Sandbox Code Playgroud)

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

Zed*_*Zed 1475

$("#regTitle").html("Hello World");
Run Code Online (Sandbox Code Playgroud)


zom*_*bat 313

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

$('#regTitle').html('Hello World');
Run Code Online (Sandbox Code Playgroud)

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

$('#regTitle').text('Hello world'); 
Run Code Online (Sandbox Code Playgroud)

  • "但保持html结构".你可以解释吗? (12认同)
  • 从jQuery API文档(http://api.jquery.com/text/)开始,`text()`与以下内容不同:`.与.html()方法不同,.text()可以在XML和HTML中使用documents.`.此外,根据http://stackoverflow.com/questions/1910794/what-is-the-difference-between-jquery-text-and-html,`jQuery.html()将字符串视为HTML,jQuery.text( )将内容视为文本`. (9认同)

Cin*_*ine 66

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

var itemtoReplaceContentOf = $('#regTitle');
itemtoReplaceContentOf.html('');
newcontent.appendTo(itemtoReplaceContentOf);
Run Code Online (Sandbox Code Playgroud)

要么:

$('#regTitle').empty().append(newcontent);
Run Code Online (Sandbox Code Playgroud)

  • 使用`itemtoReplaceContentOf.empty();`的好地方 (16认同)

dan*_*ane 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();
Run Code Online (Sandbox Code Playgroud)


Web*_*eng 11

回答:

$("#regTitle").html('Hello World');
Run Code Online (Sandbox Code Playgroud)

说明:

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

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


Som*_*luk 11

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

但我建议,你应该使用像Fade Out/Fade In这样的动画来改变HTML,这样可以改变HTML,而不是立即改变内部HTML.

使用动画更改内部HTML

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

如果你有许多需要它的函数,那么你可以调用改变内部Html的常用函数.

function changeInnerHtml(elementPath, newText){
    $(elementPath).fadeOut(500, function() {
        $(this).html(newText).fadeIn(500);
    });
}
Run Code Online (Sandbox Code Playgroud)


jit*_*ney 11

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

$("#regTitle").html("hello world");
Run Code Online (Sandbox Code Playgroud)

要么

$("#regTitle").text("hello world");
Run Code Online (Sandbox Code Playgroud)


小智 9

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

var contents = $(element).html();
$(element).html("insert content into element");
Run Code Online (Sandbox Code Playgroud)


Nik*_*iya 8

$( document ).ready(function() {
  $('.msg').html('hello world');
});
Run Code Online (Sandbox Code Playgroud)
    <!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>
Run Code Online (Sandbox Code Playgroud)


小智 6

$("#regTitle")[0].innerHTML = 'Hello World';
Run Code Online (Sandbox Code Playgroud)


Kam*_*ski 6

纯JS和最短

纯JS

regTitle.innerHTML = 'Hello World'
Run Code Online (Sandbox Code Playgroud)

regTitle.innerHTML = 'Hello World'
Run Code Online (Sandbox Code Playgroud)
regTitle.innerHTML = 'Hello World';
Run Code Online (Sandbox Code Playgroud)

最短

$(regTitle).html('Hello World'); 
Run Code Online (Sandbox Code Playgroud)

<div id="regTitle"></div>
Run Code Online (Sandbox Code Playgroud)
$(regTitle).html('Hello World'); 
Run Code Online (Sandbox Code Playgroud)