时间戳

首页 > 解决方案 > HTML 和 Javascript：如何将包含用户输入的段落元素附加到 div 元素中？

javascript - HTML 和 Javascript：如何将包含用户输入的段落元素附加到 div 元素中？

问题描述

我正在尝试创建一个简单的网页作为测试，看看我是否可以放置用户输入的文本（使用 textarea）并使用按钮添加它。此按钮旨在创建一个新的段落元素，在其中包含该用户输入，并将该段落附加到一个 div 元素。

<!DOCTYPE html>
<html>
    <script>
        function insert_text () {
            var para = document.createElement('p');
            var node = document.createTextNode('This is new.');
            para.appendChild(node);
            
            var element = document.getElementById('content_body');
            element.appendChild(para);
        }
    </script>

    <body>
        <fieldset>
            Text to insert: <br/>
            <textarea id="content" rows="10" cols="50"></textarea>
            <button id="add" onclick="insert_text()">Add</button>
        <fieldset>

        <div id="content_body">
        </div>
    </body>
</html>

目前，我只能设法附加一个预制的文本节点，如var node = document.createTextNode('This is new.');当我想对我的函数进行更改时看到的那样，它会抓取用户输入，这就是insert_text()函数的样子：

function insert_text () {
            var para = document.createElement('p');
            var node = document.getElementById('content').value;
            para.appendChild(node);
            
            var element = document.getElementById('content_body');
            element.appendChild(para);
        }

但是当我这样做时，没有任何东西最终被附加到 div 元素......我的问题似乎是什么？

标签： javascripthtml

解决方案

在您的第二个 insert_text 函数中，您var node的不是 DOM 元素而是字符串。它是文本区域内的content文本，但仅此文本并不构成 HTML 元素。

使用示例中的文本节点，您可以使用文本区域的字符串内容创建和初始化文本节点。这样你就得到了一个节点，它的文本值就是你想要的。

 var para = document.createElement('p');
 var node = document.createTextNode(document.getElementById("content").value);
 para.appendChild(node);

推荐阅读