将文本区域中的内容保存到 div答案

【问题标题】：Saving content from textarea to a div将文本区域中的内容保存到 div
【发布时间】：2018-01-10 22:27:45
【问题描述】：

如何使用 textarea 在 todo div 上创建一个 div 来保存注释?我必须将其保存在数据库中吗？

以下是便笺页面

的代码

<!DOCTYPE html>
<body>
    <h1 id="headline">Sticky note </h1>
    <div class="container-nav">
      <textarea id="submit-content"></textarea>
      <input type="button" onclick="addNote()" name="Post" class="submit-note" value="Post note">
    </div>

  <main>
    <div class="container">
      <div class="column column-one" id="column-one">
        <h2>To do</h2>
      </div>
      <div class="column column-two" id="column-two">
        <h2>Ongoing</h2>
      </div>
      <div class="column column-three" id="column-three">
        <h2>Done</h2>
      </div>
    </div>
  </main>
</body>
</html>

【问题讨论】：

看来您在这里问的问题不止一个。请具体一点，一次只关注一个问题。
您不能创建嵌套在 textarea 内的元素 - 只有文本。
您使用一个单独的元素，而不是<textarea> 来输出您的内容。如果使用.innerHTML，请确保使用正确的特殊字符转义。
好吧，更具体一点。例如，当我在文本区域内写“hello world”时，我希望它出现在“to-do”列中。我是否必须创建一个数据库才能将我在 textarea 中写入的内容存储到“待办事项”列？
不需要数据库。如果您希望它在关闭/刷新/等后持续存在，则需要将其存储在某个地方（无论是数据库、cookie、本地存储，还是只是一个外部 .txt 文件）。但是仅在 div 中显示 textarea 内容是非常简单的 javascript。

标签： javascript php html css

【解决方案1】：

首先，获取textarea的内容。然后，将一个新的 div 添加到您想要 div 的容器的 .innerHTML 中。代码如下

var content = document.getElementById("submit-content").value;
document.getElementById("whichever-container-you-want-it-in").innerHTML += "<div>" + content + "</div>;

将其放入您的 addNote() 函数中，根据需要更改属性（id/class/etc）。

【讨论】：

理想情况下不会在 HTML 中绑定事件处理程序。
我假设你会在 JS 中添加一个监听器 - 为什么这样会更好？
是的，您可以将它添加到 JS 中。关注点分离，易于维护（想象在 50 个元素上分布在 10 个页面上的 addNote()，并且不得不以某种方式对其进行更改，哎呀），每个事件绑定多个处理程序（或者至少，更容易），等等。跨度>
啊，有道理。与在线使用外部样式表类似的好处。谢谢。

【解决方案2】：

由于尚未明确定义持久性级别，此解决方案仅将注释从 <textarea> 复制到 To Do 列。它不存储在任何地方（即数据库、cookie、localStorage）。

如果我需要通过 JS 创建元素，我通常使用document.createElement。要将这个新创建的元素添加到 DOM，您需要对将添加到的元素的引用，我更喜欢 document.querySelector。然后使用appendChild方法将新的DIV作为最后一个元素添加到父元素中。

var note = document.querySelector( '#submit-content' );
var post = document.querySelector( '.submit-note' );
var toDo = document.querySelector( '#column-one' );

/**
 * Add note from textarea to a column.
 *
 * @param {DOMNode} column The column to add a note to.
 * @param {String}  note   The note/text from the textarea.
 */
function addNote( column, note ) {

  var div = document.createElement( 'div' );
  
  div.textContent = note;
  column.appendChild( div );
  
}

post.addEventListener( 'click', function ( e ) {
  addNote( toDo, note.value );
  note.value = '';
} );

<h1 id="headline">Sticky note </h1>
<div class="container-nav">
  <textarea id="submit-content"></textarea>
  <input type="button" name="Post" class="submit-note" value="Post note">
</div>

<main>
  <div class="container">
    <div class="column column-one" id="column-one">
      <h2>To do</h2>
    </div>
    <div class="column column-two" id="column-two">
      <h2>Ongoing</h2>
    </div>
    <div class="column column-three" id="column-three">
      <h2>Done</h2>
    </div>
  </div>
</main>

此示例还展示了如何通过 JS 而不是 HTML 绑定事件处理程序，这是首选方法。

【讨论】：