时间戳

首页 > 解决方案 > 如何使用 appendChild (document.createTextNode) 创建空间

javascript - 如何使用 appendChild (document.createTextNode) 创建空间

问题描述

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

在我看来，我在 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>

标签： javascriptdomspaceappendchildcreatetextnode

解决方案

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

 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>

推荐阅读