如何使用 appendChild (document.createTextNode) 创建空间答案

【问题标题】：how to make a space with appendChild (document.createTextNode)如何使用 appendChild (document.createTextNode) 创建空间
【发布时间】：2021-11-18 01:10:00
【问题描述】：

你好，我怎么能在显示数字后有一个空格。

在我看来，我在 stackoverflow 上看到有必要插入“'\ u00A0'”，但我不知道在我的代码中插入的位置，或者我错了。

document.getElementById("buttonTry").onclick = takeNumber;

function takeNumber() {
let x = document.getElementById("myNumber").value; document.getElementById("list").appendChild(document.createTextNode(x));
}

.list__number
{
  width: 200px;
  height: 300px;
  border-radius: 15px;
  border: thin solid #ccc;
}

#list
{
  font-size: 20px;
  margin: 10px;
  line-height: 1em;
  color: red;
  white-space:normal;
 
}

<body>  
Number: <input type="number" id="myNumber" value="0">
  
<p>Click the button to display the number of the number field.</p>
  
<button id="buttonTry">Try it</button>

  <section class="list__number">
  
  <p id="list"></p>
    </section>
</body>

【问题讨论】：

你的意思是换行吗？即，在单独的行中显示数字？
不，但是我在下面得到了一个解决方案，否则我会使用 CSS writing-mode: vertical-lr;文本方向：直立；

标签： javascript dom space appendchild createtextnode

【解决方案1】：

你可以在你的号码后面插入一个空格：

 document.createTextNode(`${x} `);

document.getElementById("buttonTry").onclick = takeNumber;

function takeNumber() {
let x = document.getElementById("myNumber").value; document.getElementById("list").appendChild(document.createTextNode(`${x} `));
}

.list__number
{
  width: 200px;
  height: 300px;
  border-radius: 15px;
  border: thin solid #ccc;
}

#list
{
  font-size: 20px;
  margin: 10px;
  line-height: 1em;
  color: red;
  white-space:normal;
 
}

<body>  
Number: <input type="number" id="myNumber" value="0">
  
<p>Click the button to display the number of the number field.</p>
  
<button id="buttonTry">Try it</button>

  <section class="list__number">
  
  <p id="list"></p>
    </section>
</body>

【讨论】：

很简单，谢谢fjc。