Question

在控制台中我收到的错误是div无法附加到body，因为它的值为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')会返回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中存在属性之前将其添加到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

getElement s ByTagName（）方法返回HTMLCollection（即HTMLElements [div，div，...]的数组），即使它只找到1个元素

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

即使有孩子，Div也是null

3 个答案: