javascript - 我想在我使用 DOM 选择器创建的 li 元素和在它旁边创建的按钮元素之间添加空格

Question

如何在创建的 an 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);
}

标签： javascriptdom

Answer 1

只需在按钮左侧添加一些边距

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>