爲什麼我不能在選擇器上設置innerHTML？

Question

在本頁面：

<div id="myMessage">Text to change</div> 

下面將成功改變顯示的文本：

document.getElementById("myMessage").innerHTML = "New text!"; 

但使用div的選擇並不：

$("myMessage").innerHTML = "This text will not appear!"; 

爲什麼？

Answer 1

您錯過了Sizzle查詢中的ID選擇器。但是，然後，你試圖訪問一個jQuery對象的DOM屬性，這是行不通的。

您應該使用text()或html()：

$("#myMessage").text("This text will not appear!"); 

如果你想使用.innerHTML，您可以使用get()，但隨後似乎並沒有因爲你不妨使用document.getElementById() ...

$('#myMessage').get(0).innerHTML = 'This text will not appear!'; 
// or 
$('#myMessage')[0].innerHTML = 'This text will not appear!'; 

最後，您還可以使用如下的prop()：

$('#myMessage').prop('innerHTML', 'This text will not appear!'); 

Answer 2

在jQuery中，您可以使用.html()。您的選擇器也缺少ID爲#。

$(function() { 
 
    $("#myMessage").html("This text will not appear!"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="myMessage">Text to change</div>

Answer 3

如果你想使用innerHTML，因爲jQuery的1.6版，您可以使用prop()方法

$("#myMessage").prop('innerHTML', 'This text will not appear!');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> 
 
<div id="myMessage">Text to change</div>

Answer 4

試試這個：

$("#myMessage").html("This text will appear!");