javascript - 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"; 
}

我正在将我的脚本文件导入到覆盖 Google Chrome新标签页的 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]);
 });