JavaScript中.text()方法获取完整字符串及动态Input赋值问题

安全阿岳

2026-5-13

问题分析与解决方案

你遇到的问题核心是字符串中的空格没有被正确包裹在引号里，导致HTML解析时把空格后的sharma当成了一个独立的属性，而不是value的一部分。

问题根源

你拼接HTML字符串的时候，value='+ name +'这部分没有给value值加上双引号（或单引号），当name包含空格时，浏览器会把空格后的内容识别为新的HTML属性，所以才会出现value="Ravi" sharma>这种错误结果。

修复方案

有两种推荐的解决方式：

方式1：给value添加引号

直接在拼接字符串时给value加上双引号，注意要处理好引号的嵌套：

$('#name a').click(function() {
  var name = $(this).text();
  // 用双引号包裹value值，外层用单引号避免冲突
  var html = '<input type="text" name="memberlist" value="' + name + '" /> ';
  // 记得把生成的html插入到页面目标位置，比如替换原td内容
  $(this).closest('td').html(html);
});

方式2：使用jQuery动态创建元素（更推荐）

避免手动拼接HTML字符串，用jQuery的API来创建元素，这样能自动处理字符串中的特殊字符（比如空格、引号等），更安全可靠：

$('#name a').click(function() {
  var name = $(this).text();
  // 直接创建input元素并设置属性
  var input = $('<input>', {
    type: 'text',
    name: 'memberlist',
    value: name
  });
  // 将input替换原链接的位置
  $(this).replaceWith(input);
});