Question

我有这个真正令人讨厌的问题。

总之，如果我使用(document.getElementsByTagName("p"))[0]

，我会找到一个未找到的元素

如果p标记位于div之内，则

<div id="main">
<p>see</p>
</div>

但是一旦我删除div包装器，一切都会有效。

30分钟后，我将问题简化为这个简单的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>ttttttttttttttttttttt</title>
</head>
<body>

<div id="main">
<p>see</p>
</div>

<script type="text/javascript">
var myobj = document.createElement("div");
myobj.innerHTML='yesyes';

document.body.insertBefore(myobj, (document.getElementsByTagName("p"))[0] );
</script>

</body>
</html>

将上面放在一个文件中。在Firefox或Chrome或IE8中打开。如果成功，你应该看到“是的”。如果删除<div id="main">包装器，则可以正常工作。

似乎有些事情我不了解getElementsByTagName ??

Answer 1

与getElementsByTagName无关，与insertBefore有关。试试这个：

document.getElementById('main').insertBefore(myobj, (document.getElementsByTagName("p"))[0] );

insertBefore需要父元素。它不会像你调用它那样起作用（在body上），所以我只是查找了“main”div。

Answer 2

您的问题出在document.body.insertBefore，而不是document.getElementsByTagName - 您可以通过坚持使用

来自行查看

alert(document.getElementsByTagName("p")[0].innerHTML);

在剧本的开头。

那么insertBefore发生了什么？它是所有 DOM节点的方法，正如您在该链接中看到的那样，它只会在直接子节点之前插入一个元素（或“文档片段”）那个节点。如果<div id="main>位于<p>，则getElementsByTagName找到的<body>不是body.insertBefore的直接子项，因此var first_p = document.getElementsByTagName("p")[0]; first_p.parentNode.insertBefore(myobj, first_p);将无法执行您想要的操作。

要获得所需效果，请改用

{{1}}

Answer 3

您必须为document.body指定父元素，而不是.insertBefore。

<div id="main"><p>see</p></div>

<script type="text/javascript">
var myobj = document.createElement("div");
myobj.innerHTML='yesyes';

document.getElementById('main').insertBefore(myobj, document.getElementsByTagName("p")[0] );
</script>

Answer 4

你需要在将myobj插入body

之前附加它

document.body.appendChild(myobj);

getElementsByTagName只获得顶级标签？

4 个答案: