javascript - 使用 JavaScript 动态插入文本框的内容作为段落文本

Question

我是 JavaScript 新手，我正在尝试将输入框中的文本动态添加到一个段落中（在页面顶部，在 2 个标题下）。

我有一个在这里使用的 JSFiddle

这是我的功能：

    function addText() {
            var newParagraph = document.createElement('p');
        newParagraph.textContent = textArea;
        document.getElementById("id1").appendChild(newParagraph);
        myDiv.insertBefore(newParagraph, textArea);
        }

    document.getElementById("textArea").onblur = addText;

但是，正如您所看到的，在 onblur 上，它正在这样做：[object HTMLTextAreaElement]

我不确定我哪里出错了。

Answer 1

您正在将 textArea 作为文本插入到 newParagraph 中。正如它所期望的那样，正在将 textArea 转换为字符串表示形式，即“[object HTMLTextAreaElement]”

相反，请执行以下操作：

newParagraph.textContent = textArea.value;

然后，您的代码将是：

    function addText() {

        var newParagraph = document.createElement('p');

        newParagraph.textContent = textArea.value;
        document.getElementById("id1").appendChild(newParagraph);
        myDiv.insertBefore(newParagraph, textArea);

    }

    document.getElementById("textArea").onblur = addText;

正如您告诉我您要添加新段落，请使用以下内容：

     parentObject.insertBefore(newParagraph, parentObject.firstChild);

希望我能帮到你！