Javascript .createTextNode 输出给出错误答案

【问题标题】：Javascrit .createTextNode output is giving errorsJavascript .createTextNode 输出给出错误
【发布时间】：2022-01-20 21:45:59
【问题描述】：

我创建了一个网站，它可以告诉您您的年龄。我使用 document.createTextNode 来存储输出，但输出无法正常工作。这是输出代码

var h1 = document.createElement("p");
h1.setAttribute("id", "mainText")
var mainText = document.createTextNode("You are ", ageYears, " years, ", ageMonths, " 
months and ", ageDays, " days old.");
h1.appendChild(mainText);
document.getElementById("new-age").appendChild(h1);

当我运行我的代码时，它只输出第一部分，“你是”。有没有办法输出整个消息。

【问题讨论】：

标签： javascript output createtextnode

【解决方案1】：

在 JavaScript 中，您使用 + 而不是 . 来连接字符串。

工作示例

var h1 = document.createElement("p");
h1.setAttribute("id", "mainText");
let ageYears = 20;
let ageMonths = 12
let ageDays = 24;
var mainText = document.createTextNode("You are " + ageYears + " years, " + ageMonths  + " months and " + ageDays + " days old.");
h1.appendChild(mainText);
document.getElementById("new-age").appendChild(h1);

&lt;div id="new-age"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

由于document.createTextNode 只接收一个参数作为数据，您应该像下面的代码一样更改您的document.createTextNode 以使用您的数据生成一个字符串：（在您的代码中，因为您使用, 来连接字符串，实际上您是将多个字符串传递给document.createTextNode，它只读取第一个参数并忽略其他参数）

var mainText = document.createTextNode("You are " + ageYears + " years, " + ageMonths + "months and " + ageDays + " days old.");

或：

var mainText = document.createTextNode(`You are ${ ageYears} years, ${ageMonths} months and ${ageDays} days old.`);

这是一个例子：

const ageYears = 30;
const ageMonths = 10;
const ageDays = 22;

function appendText() {
  let p = document.createElement("p");
  let mainText = document.createTextNode(`You are ${ ageYears} years, ${ageMonths} months and ${ageDays} days old.`);

  p.appendChild(mainText);
  document.getElementById("new-age").appendChild(p);
}

document.getElementById('appendBtn').addEventListener('click', appendText)

<div id="new-age"></div>
<button id="appendBtn">append text</button>

【讨论】：