getElementsByClassName（className）返回null

Question

如果我必须在Chrome扩展程序中的新标签页面元素上插入一些值，该怎么办？

我正在使用：

document.getElementsByClassName("quotes").innerHTML = Quotes[x];

在newtab-script.js页面中，但它在控制台中显示此错误：

Uncaught TypeError: Cannot set property 'innerHTML' of null

我的网页包含一个div，其中包含一个名为quotes的类，但当我发出警告时：

document.getElementsByClassName("quotes")

结果为null。

我的代码格式为：

window.onload = function abc (){ 
  alert(document.getElementById('a'));    
  document.getElementById('a').innerHTML ="ishaan"; 
}

我在html页面中导入我的脚本文件，该页面覆盖了谷歌浏览器的新标签页页面。我的脚本在脚本文件中。

Answer 1

如果有多个项目具有相同的班级名称

var quoteElems=document.getElementsByClassName('quotes')
for(var i=0;i<quoteElems.length;i++){
quoteElems[i].innerHTML=Quotes[x]
}

如果有单个项目有“引用”类

document.getElementsByClassName("quotes")[0].innerHTML = Quotes[x];

Answer 2

如果您使用jquery，那么

 $(function(){
   $('.quotes').html(Quotes[x]);
 });