使用 jQuery 将元素写入 textarea

Posted 2023-05-09

【中文标题】使用 jQuery 将元素写入 textarea

【英文标题】：Write elements to textarea using jQuery

【发布时间】：2021-10-04 05:57:28

【问题描述】：

我想从 a 中获取文本，并在文本中添加一些属性，并在按下按钮时将其显示在另一个文本中。

这是我的代码的一部分 - 如果我使用 console.log() 将记录正确的文本，但 append(x) 只写入 option[i] 值而没有任何 html 代码。

这里应该有什么解决办法？

var options;
$(function() 
  options = $('div#Thelper2_container textarea').val().split('\n');
  $.fillTextArea();

);

$.fillTextArea = function() 
  for (let i = 0; i < options.length; i++) 
    var y = i + 1;
    var x = String('<span class="textToSelect" value="' + y + '"></span>' + options[i] + '</span>\n');
    $('div#Thelper4_container textarea').append(x);
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Thelper2_container">
  <textarea rows="5" cols="100">Line 1
Line 2
</textarea>
</div>
<div id="Thelper4_container">
  <textarea rows="5" cols="100"></textarea>
</div>

【问题讨论】：

使用 val 而不是 append

这样之前的值会被覆盖，所以只有最后一次迭代的文本会在textarea中

查看我的UPDATED answer 了解我的意思

我给你做了一个 sn-p 并删除了一个 ) - 如果你实现接受的答案，你的代码也会附加空行

【参考方案1】：

使用 val 而不是 append。 Append 用于非表单字段容器元素

虽然您可以追加到文本区域，但是当您追加时，您追加的是 HTML 而不是文本。

另外你有太多的</span>s 并且 span 没有值。我改成data-value

最后我过滤空行

const $txtarea = $('#Thelper2_container textarea');
const $output =  $('#Thelper4_container textarea');
const splitLines = val => val
  .split('\n')
  .filter(line => line.trim() !== "") // drop empty lines
  .map((line,i) => `<span class="textToSelect" data-value="$i+1">$line.trim()</span>`)
  .join("\n");

$(function() 
  $output.val(splitLines($txtarea.val()));
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Thelper2_container">
  <textarea rows="5" cols="100">Line 1
Line 2
</textarea>
</div>
<div id="Thelper4_container">
  <textarea rows="5" cols="100"></textarea>
</div>

【参考方案2】：

试试这个：

$('div#Thelper4_container textarea').append(document.createTextNode(x));

请注意“document.createTextNode”。

【讨论】：

这是一个低效的解决方案。您基本上在附加之前附加您转换为文本的 html。它也不会删除空行

是的，之前的 String() 没用。我的解决方案可能并不优雅。

【参考方案3】：

您在字符串末尾附加另一个</span>\n 而不在任何地方打开它。

试试这个代码，看看它是否有效：

var x = String('<span class="textToSelect" value="' + y + '"></span>' + options[i] + '\n');