Я хочу добавить пробел между элементом li, который я создал с помощью селекторов DOM, и элементом button, созданным вдоль него - PullRequest
0 голосов
/ 25 марта 2020

Как добавить пробел между созданным элементом li и элементом button?

function createListElement(){
    var li = document.createElement("li"); 
    li.appendChild(document.createTextNode(input.value));
    li.classList.add("space") 
    var Delete = document.createElement("button");
    Delete.innerHTML="Delete";
    li.appendChild(Delete);
    Delete.addEventListener("click",function(e){
        this.parentNode.parentNode.removeChild(this.parentNode);
    })
    ul.appendChild(li);
    input.value = "";
    li.addEventListener("click", linecross);
}


Ответы [ 2 ]

0 голосов
/ 25 марта 2020

Используя свойство стиля, вы можете решить его в css

function createListElement(){
		var input = {value:'random text'};
    var ul = document.querySelector('ul');
    var li = document.createElement("li"); 
    li.appendChild(document.createTextNode(input.value));
    li.classList.add("space") 
    var Delete = document.createElement("button");
    Delete.innerHTML="Delete";
    li.appendChild(Delete);
    Delete.addEventListener("click",function(e){
        this.parentNode.parentNode.removeChild(this.parentNode);
    })
    Delete.style.marginLeft = '10px';
    ul.appendChild(li);
    input.value = "";
    li.addEventListener("click", function(){});
}
createListElement()
<html>
  <head></head>
  <body>
    <ul></ul>
  </body>
</html>
0 голосов
/ 25 марта 2020

просто добавьте немного поля к кнопке

function createListElement(){
    var li = document.createElement("li"); 
    var input =document.getElementsByTagName('input')[0];
    var ul =document.getElementsByTagName('ul')[0];
    li.appendChild(document.createTextNode(input.value));
    li.classList.add("space") 
    var Delete = document.createElement("button");
    Delete.innerHTML="Delete";
    li.appendChild(Delete);
     Delete.addEventListener("click",function(e){
        this.parentNode.parentNode.removeChild(this.parentNode);
    })
    ul.appendChild(li);
    input.value = "";
    li.addEventListener("click", linecross);
}

function linecross(){
console.log('linecross');
}

createListElement();
button{
margin-left:200px;}
<input value=5/>
<ul></ul>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...