如何用jQuery将变量作为文本添加到DOM？解决[object Object]输出异常

嘿，我来帮你搞定这个问题！你看到的[object Object]其实是个很常见的小坑——通常是因为你直接把JavaScript对象塞到DOM里了，而不是取出对象里的具体文本内容。下面我给你几种用jQuery把变量正确添加到DOM的方法：

1. 插入纯字符串变量 #

如果你的变量本身就是字符串，直接用.text()或者.html()就可以：

// 示例字符串变量
const newEntry = "这是要添加的新条目内容";

// 用.text()添加纯文本（会自动转义HTML标签，更安全）
$("#target-container").text(newEntry);

// 如果你需要插入带HTML格式的内容，用.html()（注意防范XSS风险）
$("#target-container").html(`<strong>${newEntry}</strong>`);

2. 处理对象类型的变量 #

如果你的变量是个对象，一定要先提取出里面的文本属性，再插入到DOM中：

// 示例对象
const entryData = { title: "新条目标题", content: "新条目的详细内容" };

// 方法1：直接拼接属性到HTML字符串
$("#target-list").append(`<div class="entry"><h3>${entryData.title}</h3><p>${entryData.content}</p></div>`);

// 方法2：先创建元素再设置内容（更清晰易维护）
const $entryElement = $("<div>").addClass("entry");
$entryElement.append($("<h3>").text(entryData.title));
$entryElement.append($("<p>").text(entryData.content));
$("#target-list").append($entryElement);

3. 为什么会出现[object Object]？ #

当你尝试把一个对象直接传给.text()、.html()，或者直接把对象和字符串拼接时，JavaScript会自动调用对象的默认toString()方法，而这个方法默认返回的就是[object Object]——这就是你看到这个奇怪输出的原因！只要确保插入的是对象的具体文本属性而不是对象本身，就能解决这个问题。

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