Question

我正在尝试创建一个简单的编辑器，用户可以在其中输入文本，点击编辑按钮后，它会将该文本附加到id="textArea"的末尾。在textarea中输入文本后点击编辑按钮时没有任何反应。

如果有人可以指出我做错了什么或者更好的方法来做到这一点，我会很感激，我已经看到了其他方法，但我不知道为什么这样做方式不起作用。感谢。

<!DOCTYPE html>
<html>
<head>
  <script src="https://d3js.org/d3.v3.min.js"></script>

  <script>
    function edit(){

      var editorText = document.getElementById("editor").value;
      $("#textArea")append("editorText");
      }
  </script>
</head>

<body>
  <div>
<form>
  Text Editor
<br/>
  <textarea id="editor">
  </textarea>
<br/>
  <input type="submit" value="Edit" onclick="edit()">
</form>
  </div>
<br>

  <div id="textArea">

<h2><a name="year1"></a>Document</h2>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet nisl velit, at elementum enim blandit in. Suspendisse sit amet posuere ex. Donec sit amet commodo nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam vitae tincidunt metus. Suspendisse ex ligula, placerat convallis varius in, placerat et ipsum. Pellentesque et neque nec nisl consectetur fringilla ut tristique ligula. Aliquam in sem turpis.
</p>
  </div>
</body>
</html>

编辑：在听完一些建议后，我仍然没有运气。这是我想要使用的新代码。

<!DOCTYPE html>
<html>
<head>
  <script src="https://d3js.org/d3.v3.min.js"></script>

  <script>
  function edit(){
 $("#editor").append("editorText");
}
  </script>
</head>

<body>
  <div>
<form>
  Text Editor
<br/>
  <textarea id="editor">
  </textarea>
<br/>
  <input type="button" value="Edit" onclick="edit()">
</form>
  </div>

<br>

  <div id="textArea">

<h2><a name="year1"></a>Document</h2>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet nisl velit, at elementum enim blandit in. Suspendisse sit amet posuere ex. Donec sit amet commodo nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam vitae tincidunt metus. Suspendisse ex ligula, placerat convallis varius in, placerat et ipsum. Pellentesque et neque nec nisl consectetur fringilla ut tristique ligula. Aliquam in sem turpis.
</p>
  </div>
</body>
</html>

Answer 1

你试图附加字符串“editorText”而不是变量而你错过了一个。

你应该这样做：

$("#textArea").append(editorText);

Answer 2

更改按钮并编辑功能，如下所示

<input type="button" value="Edit" onclick="edit()">

function edit(){
   $("#editor").append("editorText");
}

Answer 3

您无法将textarea的文本内容附加到元素。不要这样做，试试这个：

label

那就是jQuery。单击“提交”按钮时，$('input[type="submit"]').click(function(){ $('#textArea').text($('#editor').val()); });的文本内容将是id="textArea"的文本内容。如果您想要呈现#editor中输入的text()内的元素，则可以将html()更改为#editor。

从textarea

3 个答案: