Javascript jQuery中的InsertAfter给出错误'；未捕获类型错误：无法设置属性'；innerHTML'；空的'；；为什么？

基本上，我创建了一个模态，单击按钮将在模态中显示函数的结果。我希望单击按钮删除初始模式中的所有内容，并仅显示结果

就像我说的，我在jQuery中得到了InsertAfter，给出了错误'uncaughttypeerror:cannotsetproperty'innerHTML'为null'

我很困惑，因为我得到了一个模态容器的句柄：

modal = $('.modal')

我正在创建一个输出元素，如下所示：

 output = doc.createElement('p');

 output.setAttribute('id', 'output');

它将被附加到模态中

 $('#output').insertAfter(modal);

那么，如果我只是创建了容器，为什么会出现null错误呢

 doc.getElementById('output').innerHTML = out.join("\n");

HTML:

此应用程序将检查您的一些标记，以确定它是否更易于访问。我们将首先检查图像上的alt标记，看看它们是否存在，或者标记是否为空<让我们开始吧

点击我

JS:

函数altChecker（）{
var doc=文件，
out=[]，
getStartedBtn=doc.getElementById（'getStartedBtn'），
模态=$（'.modal'），
输出=doc.createElement（'p'）；
setAttribute（'id'，'output'）；
addHandler（getStartedBtn，'click'，函数（）{
var all=doc.getElementsByTagName（“IMG”）；
对于（变量i=0，max=all.length；i'+id+'的图像元素具有alt标记）；
var value=all[i].getAttribute（'alt'）；
如果（值！=“”）{
out.push（id+'alt=“'+value+'”）；
}否则{
out.push（'But'+id+'\'s alt为空）；
}
}否则{
push（id+'没有alt'）；
}
}
$（“#输出”）。插入后面（模式）；
doc.getElementById（'output'）.innerHTML=out.join（“\n”）；
});
}

那么，如果我只是创建了容器，为什么会出现null错误呢

 doc.getElementById('output').innerHTML = out.join("\n");

因为您没有将它放入DOM中，所以即使它有一个

id

，也找不到它；因此，

$（“#输出”）.insertAfter（model）行是不可操作的。稍后，当您执行
doc.getElementById（'output'）
时，它不在DOM中，因此返回
null
，它将失败

相反，由于您在
输出中已经有了对元素的引用，您应该执行以下操作：

$(output).insertAfter(modal);

稍后，当您使用
getElementById
时，无需再次查找，因为您已经有了它，所以：

output.innerHTML = out.join("\n");

或

谢谢但是我刚刚意识到，
insertAfter
做它所说的（d'oh），在给定的元素之后插入。有插入物吗？与之类似，它会插入到
模态
div中，从而弹出初始内容？@AntonioOrtiz:“是否有insertInto”
appendTo
和
prependTo
都会这样做（分别在末尾和开头）。花一个小时左右的时间从头到尾阅读jQueryAPI是值得的。它真的只需要那么长的时间，而且它会立即回报你。：-）@谢谢T.J.-我应该更清楚，因为我使用了一个很棒的应用程序，就像一个袖珍文档集
output.innerHTML = out.join("\n");

$(output).html(out.join("\n"));