Chrome/Firefox扩展开发：JQuery修改XHR响应输入框值遇异常

嘿，这问题我太熟啦！你现在遇到的核心问题是每次调用$(data)都会重新把原始HTML字符串解析成全新的jQuery DOM对象——你第一次修改的是一个临时对象，之后console.log时又重新生成了一个新的，自然拿不到修改后的值。

修复方案：复用同一个jQuery DOM对象 #

把解析后的HTML片段存到变量里，后续所有操作都基于这个变量，而不是反复从原始字符串生成新对象：

var url = browser.extension.getURL("resources/forms/form-a.html");
$.get(url, function(data){
  // 一次性把原始HTML转成jQuery对象并保存到变量
  const $formElement = $(data);
  
  // 基于这个变量修改输入框值
  $formElement.find("input[id='name:front']").val("New Value");
  
  // 现在再从同一个变量里取值，就能得到修改后的结果了
  console.log($formElement.find("input[id='name:front']").val());
  
  // 最后把修改好的DOM片段插入到页面目标位置
  // 这里替换成你实际要插入的DOM元素，比如$("#target-container")
  $("body").append($formElement);
});

额外小提示 #

你用[id='name:front']这种属性选择器是完全没问题的——虽然jQuery里冒号是特殊字符，但用属性选择器包裹起来就不会有解析问题，不用改这个写法哦。

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