为什么我不能在选择器上设置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!");