gpt4 book ai didi

javascript - 试验 DOM 函数

转载 作者:行者123 更新时间:2023-11-30 08:14:44 26 4
gpt4 key购买 nike

我使用 Javascript 操作 HTML 元素的大部分经验都涉及 innerHTML 属性。当涉及到 DOM 操作时,我的知识严重缺乏。因此,为了尝试纠正这个问题,我一直在试验 Javascript DOM 函数。

一个简单的测试是向 DOM 添加一个节点。 Internet 上有无数教程演示如何执行此操作,但出于某种原因我无法让它实际工作。

在下面的测试代码中,我有一个 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)"

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

最佳答案

您正在尝试将节点插入到 <body> 中,但是 <body>标记不是输入元素的父级。尝试给出 <div> <input>周围一个“id”值,然后执行:

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

关于javascript - 试验 DOM 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5608582/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com