如何在textarea中以纯文本形式追加HTML标签？

嗨，我完全懂你踩的这个坑！想点按钮给textarea里塞<b> </b>当纯文本用，但用append就是没反应，普通文字却能正常显示对吧？这问题其实出在你操作textarea内容的方式上~

你用的append()是jQuery里用来操作DOM节点的方法，它会把你传的字符串当成HTML代码去解析——比如你传<b>，它会试着创建一个<b>元素然后塞到textarea里，但textarea是个特殊的表单控件，它的内容根本不是通过子DOM元素来管理的，而是靠value属性存的纯文本内容，所以这么操作自然看不到你要的标签啦。

给你两个解决方案，按需选就行：

• 基础版：直接拼接到现有内容后面
  用jQuery的val()方法来读写textarea的内容，先拿到当前值，把<b> </b>拼上去再赋值回去就行，代码改完是这样的：

  boldButton.on("click", (Event) => {
    Event.preventDefault();
    // 拿到当前内容，拼接新标签，重新赋值
    textArea.val(textArea.val() + '<b> </b>');
  });
  

• 进阶版：支持选中内容包裹标签（更友好）
  如果想让用户选中一段文字后，点击按钮直接用<b>把选中内容包起来，没选中的话就插入<b> </b>并把光标移到中间，体验更好，代码可以这么写：

  boldButton.on("click", (Event) => {
    Event.preventDefault();
    // 拿到原生的textarea DOM元素
    const nativeTextarea = textArea[0];
    const startPos = nativeTextarea.selectionStart;
    const endPos = nativeTextarea.selectionEnd;
    const currentContent = nativeTextarea.value;
  
    // 拼接新内容：前面的部分 + <b> + 选中的内容 + </b> + 后面的部分
    const newContent = currentContent.substring(0, startPos) 
      + '<b>' 
      + currentContent.substring(startPos, endPos) 
      + '</b>' 
      + currentContent.substring(endPos);
  
    nativeTextarea.value = newContent;
    // 把光标移到<b>和</b>中间，方便用户直接输入
    nativeTextarea.selectionStart = nativeTextarea.selectionEnd = startPos + 3;
  });
  

总之记住一个关键点：textarea、input这类表单元素的内容是纯文本，必须通过value（jQuery里是val()）来操作，别用append、html这些针对DOM元素的方法，不然就会出现你这种标签“消失”的情况~

内容来源于stack exchange