Question

我使用Javascript操作HTML元素的大部分经验涉及innerHTML属性。在DOM操作方面，我的知识非常缺乏。因此，为了尝试纠正这个问题，我一直在尝试使用Javascript DOM函数。

一个简单的测试是仅向DOM添加一个节点。互联网上有无数的教程，演示了如何做到这一点，但由于某种原因，我无法让它真正起作用。

在下面的测试代码中，我有一个HTML input元素，当单击它时，会触发一个Javascript函数，该函数应该只是向DOM添加div元素并使其出现在屏幕。

<html>
<head>
<script type = "text/javascript">
function test()
{
    var newDiv = document.createElement("div");
    newDiv.innerHTML = "<h1>blah blah</h1>";
    document.body.insertBefore(newDiv, document.getElementById('DOMTester'));
}
</script>
</head>

<body>
<div>
<input id='DOMTester' type='submit' onclick='test()'>
</div>

</body>
</html>

然而，这不起作用。当insertBefore()被调用时，它会在Firefox上生成例外："Node was not found" code: "8" nsresult: "0x80530008 (NS_ERROR_DOM_NOT_FOUND_ERR)"

为什么这会失败？这不应该只是在div按钮之前插入新的submit元素吗？

Answer 1

您尝试将节点插入<body>，但<body>标记不是您输入元素的父级。尝试在<div>“id”值周围提供<input>，然后执行：

document.getElementById("theDiv").insertBefore(newDiv, document.getElementById('DOMTester'));

Answer 2

更简单的测试：

document.body.appendChild(newDiv);

您的问题是，当您提供引用元素时，它必须是insertBefore方法的接收者元素的子元素（在本例中为document.body）。做：

var tester = document.getElementById('DOMTester');
tester.parentNode.insertBefore(newDiv,tester);

Answer 3

你走了：

var input = document.getElementById('DOMTester');

input.onclick = function() {
    var newDiv = document.createElement('div');
    newDiv.innerHTML = '<h1>blah blah</h1>';
    this.parentNode.insertBefore(newDiv, this);
};

现场演示： http://jsfiddle.net/simevidas/NwnKU/

Answer 4

您需要取消div周围的额外input#DOMTester：

http://jsfiddle.net/Xycve/

<html>
<head>
<script type = "text/javascript">
function test()
{
    var newDiv = document.createElement("div");
    newDiv.innerHTML = "<h1>blah blah</h1>";
    document.body.insertBefore(newDiv, document.getElementById('DOMTester'));
}
</script>
</head>

<body>
<input id='DOMTester' type='submit' onclick='test()'>

</body>
</html>

试验DOM功能

4 个答案: