1

段落の前に新しい入力テキストを追加したい。しかし、それは逆に機能し、テキストの後に追加します。
このコードで何が間違っていますか?
私はdocument.getElementById("p1").insertBefore(node);この目的で使用していますが、成功していません。なぜこれが起こるのですか？

コード：

<html>
    <head>
        <title>Adding text to a page</title>
            <script>
                function addText() {
                    var sentence=document.form1.sentence.value;
                    var node=document.createTextNode(sentence + " ");
                    document.getElementById("p1").insertBefore(node);
                }
            </script>
    </head> 
        <body>
            <h1>Create Your Own Content</h1>
            <p id="p1">Using the W3C DOM, you can dynamically
                add sentences to this paragraph. Type a sentence
                and click the Add button.</p>       
            <form name="form1">
                <input type="text" name="sentence" size="65">
                <input type="button" value="Add" onClick="addText();">
            </form>
        </body>    
</html>

質問：

  • この問題を解決するには？
4

2 に答える 2

1

insertBeforeメソッドは、次のように、(挿入する) 親ノードで呼び出す必要がありますappendChild。

var node=document.createTextNode(sentence + " ");
var p1 = document.getElementById("p1");
p1.parentNode.insertBefore(node, p1);

段落の前ではなく段落に文を追加したい場合は<body>、次のように使用します。

p1.appendChild(node); // insert at the end
// or
p1.insertBefore(node, p1.firstChild); // insert at the beginning
于 2013-04-09T14:01:49.007 に答える