為什么此行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";