Javascript 试验DOM函数_Javascript_Dom

Javascript 试验DOM函数

javascript dom

Javascript 试验DOM函数,javascript,dom,Javascript,Dom,我使用Javascript操作HTML元素的大部分经验都涉及innerHTML属性。在DOM操作方面，我的知识严重不足。因此，为了尝试纠正这一点，我一直在试验Javascript DOM函数一个简单的测试就是只向DOM添加一个节点。互联网上有无数的教程演示了如何做到这一点，但由于某种原因，我无法让它真正起作用在下面的测试代码中，我有一个HTMLinput元素，当单击该元素时，会触发一个Javascript函数，该函数只需将div元素添加到DOM中，并使其显示在屏幕上 <html>

我使用Javascript操作HTML元素的大部分经验都涉及

innerHTML

属性。在DOM操作方面，我的知识严重不足。因此，为了尝试纠正这一点，我一直在试验Javascript DOM函数

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

在下面的测试代码中，我有一个HTML

input

元素，当单击该元素时，会触发一个Javascript函数，该函数只需将

div

元素添加到DOM中，并使其显示在屏幕上

<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>


功能测试（）
{
var newDiv=document.createElement（“div”）；
newDiv.innerHTML=“诸如此类”；
document.body.insertBefore（newDiv，document.getElementById（'DOMTester'）；
}

然而，这不起作用。调用

insertBefore（）

时，它会在Firefox上生成一个异常：

“未找到节点”code:“8”nsresult:“0x80530008（NS_ERROR\u DOM\u not_found\u ERR）”

为什么会失败？这不应该简单地将新的

div

元素插入到

submit

按钮之前吗？

您试图将节点插入

，但是

标记不是输入元素的父元素。试着在

周围给

一个“id”值，然后执行以下操作：

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

您正试图将节点插入

，但

标记不是输入元素的父元素。试着在

周围给

一个“id”值，然后执行以下操作：

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

更简单的测试：

document.body.appendChild(newDiv);

您的问题是，当您提供一个引用元素时，它必须是

insertBefore

方法（在本例中为

document.body

）的接收方元素的子元素。做：

更简单的测试：

document.body.appendChild(newDiv);

您的问题是，当您提供一个引用元素时，它必须是

insertBefore

方法（在本例中为

document.body

）的接收方元素的子元素。做：

给你：

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

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

var input=document.getElementById（'DOMTester'）；
input.onclick=函数（）{
var newDiv=document.createElement（'div'）；
newDiv.innerHTML='blah blah'；
this.parentNode.insertBefore（newDiv，this）；
};

现场演示：给你：

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

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

var input=document.getElementById（'DOMTester'）；
input.onclick=函数（）{
var newDiv=document.createElement（'div'）；
newDiv.innerHTML='blah blah'；
this.parentNode.insertBefore（newDiv，this）；
};

现场演示：

您需要去掉

输入#DOMTester

周围的额外

div

：


功能测试（）
{
var newDiv=document.createElement（“div”）；
newDiv.innerHTML=“诸如此类”；
document.body.insertBefore（newDiv，document.getElementById（'DOMTester'）；
}

您需要去掉

输入#DOMTester

周围的额外

div

：


功能测试（）
{
var newDiv=document.createElement（“div”）；
newDiv.innerHTML=“诸如此类”；
document.body.insertBefore（newDiv，document.getElementById（'DOMTester'）；
}

。。。它还坚持在其上下文中调用函数的元素是引用元素（第二个参数）的父元素。@Pointy不仅如此，OP还获得了正确的顺序。我在第一次通过这个答案时几乎失败了：p。。。它还坚持在其上下文中调用函数的元素是引用元素（第二个参数）的父元素。@Pointy不仅如此，OP还获得了正确的顺序。我在第一次通过这个答案时几乎失败了：p