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 回答
0

你可以

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

像这样：

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;
}

新的 jsFiddle

于 2013-04-09T14:08:27.063 回答