为什么此行Javascript有效，而另一行无效？

Question

因此，我正在尝试更新div #letters的内容。 我尝试将元素分配给变量并使用innerHTML更新其内容，但是它不起作用。

  var $characterArray = $('#letters'); // The letters div
  $characterArray.innerHTML = "whatever";

尽管这可行：

  document.getElementById("letters").innerHTML = "whatever";

你能告诉我为什么吗？

Answer 1

因为您将jQuery与本机JS混淆了。 jQuery对象没有此类属性innerHTML这是一个本机属性。

jQuery中的等效方法是html()方法

$('something').html('my html');

Answer 2

第一个代码段使用jQuery库（不是Vanilla JS），该库具有用于设置元素内部HTML内容的不同方法名称。 jQuery的正确用法是：

var $characterArray = $('#letters'); // The letters div
$characterArray.html('whatever');

Answer 3

第一行不是普通的Javascript。 它需要一个称为jQuery的JavaScript框架。

如果您想依靠jQuery并将其包含在页面中，则可以使用html() ：

$("#letters").html("whatever");

PS我以为您不了解jQuery，因为jQuery -tag是通过@DarrenSweeney 稍后添加的 。

Answer 4

如果您确实想针对本机HTML元素进行编码，则可以使用索引来访问它：

var $characterArray = $('#letters')[0]; // The letters div
$characterArray.innerHTML = "whatever";