Question

按下Hey girls!按钮后，

The following code在push段后创建了一个文字输入字段：

<html>
<head>
<script>
function func()
{
var elem=document.createElement("input");
document.body.appendChild(elem);
elem.setAttribute('type','text');
}
</script>
</head>
<body>
<p>Hey guys!<p>
<input type="button" value="push" onclick="func()"/>
<script>
func();
</script>
<p>Hey girls!<p>
</body>
</html>

如何确保在Hey girls!段落之前和Hey guys!段落之后创建文本输入字段？

Answer 1

使用.insertBefore()。你只需要获得一个“嘿女孩！”的参考。段。在您的情况下，您可以选择正文中的第二个段落，也可以选择正文中唯一输入后的元素 - 或者您使用id。例如：

function func() {
    var elem = document.createElement("input");
    elem.setAttribute('type','text');
    var ps = document.getElementsByTagName("p");
    if (ps.length < 2)
        return; // abort! we didn't find our element
    var p = ps[1];      
    document.body.insertBefore(elem, p);
}

Answer 2

这是HTMLElement.prototype.insertBefore的工作。

概要： parentElement.insertBefore（newElement，referenceElement）;

示例：

document.body.insertBefore( elem, document.getElementsByTagName('p')[1] );

由于您的段落节点没有任何 ID 或 classname ，我只是用.getElementsByTagName引用了它。如果您有更准确的查询可能性，会使事情变得更容易。

参考：https://developer.mozilla.org/en-US/docs/DOM/Node.insertBefore

Answer 3

对特定的父元素执行appendChild，而不是在正文上。

`document.body.appendChild（elem）;`追加到html主体的末尾。如何放置在身体的特定位置？

3 个答案: