Question

我想在段落之前添加新的输入文本。但它的工作方式是在文字之后添加这段代码有什么问题？
我将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>

问题：

如何解决这个问题？

Answer 1

需要在父节点（要插入的地方）上调用insertBefore method，就像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

Answer 2

你可以

抓住新句子。
抓取原始内容。
将它们放在一个变量中。
清除元素。
把它拉回来。

像这样：

var addText = function() {
    var sentence = document.form1.sentence.value;
    var node = document.createTextNode(sentence + " ");
    var el = document.getElementById("p1");
    var original = el.innerHTML;
    var newPara = sentence + ". " + original;
    el.innerHTML = "";
    el.innerHTML = newPara;
}

jsFiddle

请注意，这有很多步骤，但是，嘿，百万种方法给猫皮肤。

当然，您可以随时将所有代码缩短到此处：

var addText = function() {
    document.getElementById("p1").innerHTML =  document.form1.sentence.value + ". " + document.getElementById("p1").innerHTML;
}

new jsFiddle

在段落之前添加带有DOM模型的元素

2 个答案: