Блог

Главная - Вопросы по программированию - как сделать пробел с помощью appendChild (document.createTextNode)

как сделать пробел с помощью appendChild (document.createTextNode)

#javascript #dom #space #appendchild #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>

Комментарии:

1. Вы имеете в виду разрыв линии? т. е. показывать цифры в отдельных строках?

2. Нет, но мне предложили решение ниже, в противном случае я делаю это с помощью CSS-режима записи: вертикальный-lr; ориентация текста: вертикальная;

Ответ №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>

Комментарии:

1. Все очень просто,спасибо fjc.

Метки: