js给textarea赋值的方法

在前端开发中，经常会遇到需要通过JavaScript给textarea元素赋值的情况。下面将介绍几种常见的方法。

一、使用value属性

这是最基本也是最常用的方式。在HTML中创建一个textarea元素，为其设置一个id属性，方便在JavaScript中获取该元素。例如：

<textarea id="myTextarea"></textarea>

然后，在JavaScript中通过document.getElementById()方法获取textarea元素，再直接为其value属性赋值。示例代码如下：

var textarea = document.getElementById('myTextarea');
textarea.value = '这是通过value属性赋的值';

这种方法简单直接，适用于大多数场景。

二、使用innerHTML属性

虽然textarea元素主要用于输入文本，但也可以通过innerHTML属性来赋值。不过需要注意的是，innerHTML会解析HTML标签。示例如下：

<textarea id="myTextarea2"></textarea>

var textarea2 = document.getElementById('myTextarea2');
textarea2.innerHTML = '<b>加粗文本</b>';

这样在textarea中显示的内容将是包含HTML样式的文本。但如果只是单纯想赋值纯文本，不建议使用此方法，因为它可能会带来安全风险，比如XSS攻击。

三、使用textContent属性

textContent属性可以设置或获取元素的文本内容，并且不会解析HTML标签。

<textarea id="myTextarea3"></textarea>

var textarea3 = document.getElementById('myTextarea3');
textarea3.textContent = '使用textContent赋值';

这种方法能确保赋值的内容只是纯文本，安全性较高，在只需要设置纯文本内容时是个不错的选择。

四、使用jQuery

如果项目中引入了jQuery库，那么给textarea赋值会更加便捷。通过选择器获取textarea元素，然后使用val()方法赋值。示例如下：

<textarea id="myTextarea4"></textarea>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

$('#myTextarea4').val('使用jQuery赋值');

jQuery的语法简洁明了，能有效提高开发效率。

在选择给textarea赋值的方法时，要根据实际需求来决定。如果是简单的纯文本赋值，使用value属性或textContent属性即可；若涉及到HTML内容，可考虑innerHTML属性，但要注意安全问题；而在使用了jQuery库的项目中，使用jQuery的方法会更加方便快捷。