0

以下代码Hey girls!在按下按钮时在段落之后创建一个文本输入字段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!？

4

3 回答 3

1

使用.insertBefore(). 您只需要获得对“Hey Girls！”的引用即可。段落。在您的情况下，您可以选择正文中的第二段，或者可能是正文中唯一输入之后的元素 - 或者您使用 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);
}
于 2012-10-01T22:35:09.493 回答
1

那是一份工作HTMLElement.prototype.insertBefore。

概要：parentElement.insertBefore(newElement, referenceElement);

例子：

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

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

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

于 2012-10-01T22:35:41.043 回答
0

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

于 2012-10-01T22:34:09.307 回答