Создание HTML-элементов с JavaScript против регулярных HTML

Question

У меня есть HTML-код, как это:

<div id="user-nav"> 
    <button class="btn btn-primary btn-sm">Subscribe Now</button> 
    <button class="btn btn-primary btn-sm">Log In</button> 
</div> 

А потом я попытался создать то же самое с JavaScript:

// usernav - subscribe, login, settings 
var subbtn = document.createElement("button"); 
subbtn.className = "btn btn-primary btn-sm"; 
subbtn.textContent = "Subscribe Now"; 
usernav.appendChild(subbtn); 

var loginbtn = document.createElement("button"); 
loginbtn.className = "btn btn-primary btn-sm"; 
loginbtn.textContent = "Log In"; 
usernav.appendChild(loginbtn); 

Мой код JavaScript работает отлично хорошо.

Однако есть небольшая разница в том, что кнопки, созданные JavaScript, касаются друг друга, тогда как когда я только что закодирован в HTML, между двумя кнопками существует небольшой промежуток.

Когда я проверяю элемент на двух страницах, код тот же.

Почему это происходит и как я могу получить тот же результат на JavaScript?

Answer 1

, почему это происходит:

Вашего HTML содержит пробельные символы между этими двумя элементами, которые получают уложенные в единое пространство с по умолчанию стиля.

Однако ваш JavaScript не создает этот белый-пространственный текстовый узел.

Доказательство:

Вот отрывок, который показывает, что на самом деле 5 дочерние узлы, созданные с помощью HTML, 3 из которых в текстовые узлы из белого пространства.

var el = document.getElementById('user-nav'); 
 

 
console.log(el.childNodes); 
 

 
document.getElementById('output').textContent = 'Number of Child nodes: ' + el.childNodes.length;

<div id="user-nav"> 
 
    <button class="btn btn-primary btn-sm">Subscribe Now</button> 
 
    <button class="btn btn-primary btn-sm">Log In</button> 
 
</div> 
 

 
<pre id="output"></pre>

Если вы проверяете вашу консоль, вы увидите вывод вроде следующего:

NodeList [ #text " 
    ", <button.btn.btn-primary.btn-sm>, #text " 
    ", <button.btn.btn-primary.btn-sm>, #text " 
" ] 

Воссоздать Результат:

Вы можете создать текстовый узел в JavaScript используя document.createTextNode следующим образом:

var usernav = document.getElementById('user-nav'); 
 

 
var subbtn = document.createElement("button"); 
 
subbtn.className = "btn btn-primary btn-sm"; 
 
subbtn.textContent = "Subscribe Now"; 
 
usernav.appendChild(subbtn); 
 

 
// Insert text node between the buttons: 
 
usernav.appendChild(document.createTextNode(' ')); 
 

 
var loginbtn = document.createElement("button"); 
 
loginbtn.className = "btn btn-primary btn-sm"; 
 
loginbtn.textContent = "Log In"; 
 
usernav.appendChild(loginbtn);

<div id="user-nav"></div>

Однако, вы можете рассмотреть возможность использования CSS вместо этого.

Answer 2

Вы можете вставить пробел с textNode:

var usernav = document.getElementById('user-nav'); 
 
var subbtn = document.createElement("button"); 
 
subbtn.className = "btn btn-primary btn-sm"; 
 
subbtn.textContent = "Subscribe Now"; 
 
usernav.appendChild(subbtn); 
 
usernav.appendChild(document.createTextNode('\n')); 
 

 
var loginbtn = document.createElement("button"); 
 
loginbtn.className = "btn btn-primary btn-sm"; 
 
loginbtn.textContent = "Log In"; 
 
usernav.appendChild(loginbtn);

<div id="user-nav"> 
 

 
</div>