为什么这行Javascript工作，但另一方面没有？

Question

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

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

虽然这有效：

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

你能告诉我为什么吗？

Answer 1

因为您正在使用本机JS混淆jQuery。 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

第一行不是vanilla Javascript。它需要名为jQuery的JavaScript Framework。

如果您想依赖jQuery并在页面中使用included it，那么您可以使用html()：

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

P.S。我假设您不了解jQuery，因为jQuery - 标签是added later到@DarrenSweeney。

Answer 4

如果您真的想针对本机HTML元素进行编码，可以使用索引来获取它：

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