如何在JS中用模板字面量输出用户输入？渲染HTML遇[object...]错误

嘿，我一眼就发现问题所在啦！你遇到的[object HTMLInputElement]提示，是因为你直接把DOM元素对象塞进了模板字面量里，而不是取它的输入值。另外你的代码还有几处语法错误，这也是导致运行失败的关键原因。

问题拆解 #

• 你用document.getElementById("heading")拿到的是整个input元素对象，不是用户在输入框里填写的文本内容，所以模板里直接用${heading}会输出元素的对象描述，也就是[object HTMLInputElement]。
• 代码里的open.document.write(没有闭合右括号，函数print也缺少闭合的}，这些语法错误会直接导致脚本运行报错。

修正后的完整代码 #

<script>
function print(){
  var headingInput = document.getElementById("heading"); // 改名更清晰，区分元素和值
  var newWindow = window.open(""); // 用window.open更规范，避免和内置方法重名
  newWindow.document.write(`
    <!DOCTYPE html>
    <html>
    <head>
      <title>Dummy Page</title>
    </head>
    <body>
      <div>
        <h1>${headingInput.value}</h1> <!-- 这里取input的value属性获取用户输入 -->
      </div>
    </body>
    </html>
  `);
  newWindow.document.close(); // 记得关闭文档流，确保内容完整渲染
}
</script>

额外小提示 #

1. 变量名尽量避开open这种内置方法名，防止命名冲突，我改成了newWindow更直观。
2. 写完新窗口的HTML内容后调用document.close()，能确保浏览器正确结束文档解析，完整渲染页面。
3. 如果你的场景需要处理用户输入的HTML内容（不只是纯文本），要注意XSS安全风险，最好对输入内容做转义处理，比如如果只是展示纯文本，也可以通过创建文本节点的方式插入，避免注入风险。

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