如何将JS DOM元素变量传入HTML字符串？代码执行异常求助

咱们一步步拆解你代码里的问题，很快就能搞定：

1. 变量赋值的核心错误 #

你写的 var salesRep = $("ul.map").attr("id","1"); 存在关键问题：jQuery 的 attr() 方法传入两个参数（属性名+属性值）时，是设置属性的操作，返回的是对应的 jQuery 对象，不是你设置的属性值。直接把这个对象拼接到字符串里，页面只会显示 [object Object]，这就是内容无法正常显示的主要原因。

如果你的目标是获取设置后的 id 值，应该拆分操作：

// 先给ul设置id
$("ul.map").attr("id", "1");
// 再获取id值赋值给salesRep
var salesRep = $("ul.map").attr("id");

如果你的目标是拿到这个 ul 元素本身（后续要操作它的文本/HTML），可以保留对象赋值，但拼接时要明确获取内容，比如用 .text() 或 .html()。

2. 函数调用的无效性 #

你定义的 getSalesRep(salesRep) 需要传入参数，但在 show() 里调用时写的是 getSalesRep(); —— 既没传参，也没接收返回值，这个函数相当于没起作用。如果确实需要用这个函数传递变量，应该改成这样：

function getSalesRep(reps) {
  return reps;
}

function show() {
  // 传入参数并接收返回值
  var currentRep = getSalesRep(salesRep);
  // 注意：这里要闭合p标签，你原来写的是<p>，会导致HTML结构错误
  var x1 = "<p>" + currentRep + "</p>";
  $("#map").after(x1); // 直接传字符串即可，不需要再用$(x1)
}

3. 额外小问题：HTML标签未闭合 #

你写的 "<p>" + salesRep + "<p>" 里，第二个标签应该是 </p>，未闭合的标签会导致页面DOM结构异常，也可能影响显示效果。

完整修正后的代码示例 #

场景1：显示ul的id值 #

// 初始化设置并获取id
$("ul.map").attr("id", "1");
var salesRep = $("ul.map").attr("id");

function getSalesRep(reps) {
  return reps;
}

function show() {
  var currentRep = getSalesRep(salesRep);
  var x1 = "<p>" + currentRep + "</p>";
  $("#map").after(x1);
}

场景2：显示ul里的文本内容 #

// 获取jQuery对象并设置id
var salesRep = $("ul.map").attr("id", "1");

function getSalesRep(reps) {
  return reps;
}

function show() {
  var currentRep = getSalesRep(salesRep);
  // 获取元素的文本内容
  var repText = currentRep.text();
  var x1 = "<p>" + repText + "</p>";
  $("#map").after(x1);
}

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