如何获取动态生成（可拖拽）元素中指定data-type的textarea文本值

问题分析 #

你原来的代码存在两个核心问题：

• 选择器未精准定位到data-type="paragraph"的textarea，且jQuery对象不能直接调用innerText，textarea的内容需要用.val()方法获取
• 第二段代码错误选择了section元素，但你的页面结构是<session>标签，完全不匹配

正确代码示例 #

方法1：jQuery实现（推荐）

如果元素是页面加载后动态生成的，确保这段代码在元素生成之后执行（比如放在生成元素的回调逻辑里，或通过按钮点击等事件触发）：

// 精准筛选所有data-type为paragraph的textarea
const values = $('textarea[data-type="paragraph"]').map(function() {
  // 用jQuery的.val()方法获取textarea的内容，也可以用原生DOM属性this.value
  return $(this).val();
}).get();

console.log(values); // 输出 ["text_1", "text_2", "text_3"]

方法2：原生JavaScript实现

如果不需要依赖jQuery，直接用原生DOM API也能实现：

// 获取所有符合条件的textarea元素
const textareas = document.querySelectorAll('textarea[data-type="paragraph"]');
// 转换为数组并提取每个textarea的内容
const values = Array.from(textareas).map(item => item.value);

console.log(values);

额外提示 #

如果元素是通过异步请求或动态渲染生成的，不要在$(function(){})里直接执行获取代码——此时元素还未生成，自然拿不到值。可以把获取逻辑放在元素生成的代码之后，或者绑定到某个用户操作事件（比如点击按钮）触发执行。

内容的提问来源于stack exchange，提问作者Mathieu