Question

如何使用 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>

Answer 1

首先，获取textarea的内容。然后，将新div添加到容器的.innerHTML，无论你想要div。代码如下

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

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

Answer 2

由于尚未明确定义持久性级别，此解决方案仅将注释从<textarea>复制到待办事项列。它不存储在任何地方（即数据库，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来绑定事件处理程序，这是首选方法。

将内容从textarea保存到div

2 个答案: