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!」への参照を取得するだけで済みます。段落。あなたの場合、本文の2番目の段落、または本文の唯一の入力の後の要素を選択するか、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 を実行します。

于 2012-10-01T22:34:09.307 に答える