Div 为空，即使它有一个 child

Question

在控制台中，我收到错误消息，指出 div 无法附加到正文，因为它的值为 null。为什么是这样？有内容。

var div = document.createElement("div");
document.getElementsByTagName('div').innerHTML = '<img alt="pickle" 
src="images/pickle">';
div.style.visibility = "visible";
div.style.position = "absolute";
div.style.zIndex = "3";
document.body.appendChild(div);

Answer 1

这里有两个问题

您的 div 还不是文档的一部分，因此 document.getElementsByTagName('div') 还不会生成那个 div
还有 document.getElementsByTagName('div') returns 一个 NodeList 而不是单个 Node，并且 NodeList 没有 innerHTML 属性.

替换此行

document.getElementsByTagName('div').innerHTML = '<img alt="pickle" src="images/pickle">';

来自

div.innerHTML = '<img alt="pickle" src="images/pickle">';

演示

var div = document.createElement("div");
div.innerHTML = '<img alt="pickle" src="images/pickle">';
div.style.visibility = "visible";
div.style.position = "absolute";
div.style.zIndex = "3";
document.body.appendChild(div);

Answer 2

实际上，您正试图在 div 出现在 DOM 之前将属性添加到 div。首先你必须创建元素并赋予它属性。试试这个

var div = document.createElement( "div" );
document.body.appendChild(div);
document.getElementsByTagName( 'div' )[ 0 ].innerHTML = ' <img alt="pickle" src="images/pickle"> ';
var divEle = document.getElementsByTagName( 'div' )[ 0 ];
divEle.style.visibility = "visible";
divEle.style.position = "absolute";
divEle.style.zIndex = "3";

Answer 3

getElementsByTagName() 方法 returns HTMLCollection（即 HTMLElements 数组 [div, div, ... ] ) 即使只找到 1 个元素

var divarray = document.getElementsByTagName("div");
if (divarray.length >= 1) var firstdiv = divarray[0];

Div 为空，即使它有一个 child

Div is null even though it has a child

javascript

debugging

console

dom

javascript-debugger