Question

我曾尝试仅在JavaScript中创建待办事项列表。我希望在最终用户插入文本时附加内容。我在这里放置了我的代码。

function Add(){
    var a, input, ul, ulAttr, li;
    function button(){
        a = document.createElement("button");
        a.innerHTML = "Add";
        document.body.appendChild(a);
    }   

    function inputa(){
        input = document.createElement("input");
        input.type = "text";
        input.value = "21";
        document.body.appendChild(input);
    }

    function ula(){
        ul = document.createElement("ul");
        ulAttr = document.createAttribute("id");
        ulAttr.value = "demo";
        ul.setAttributeNode(ulAttr);
        document.body.appendChild(ul);

        li = document.createElement("li");
        li.innerHTML = input.value;
        document.ul.appendChild(li);
    }

    inputa();
    button();
    ula();
}

Answer 1

以下是您的代码，经过修改以满足您的需求：

function Add(){
var a, input, ul, ulAttr, li;
function button(){
	a = document.createElement("button");
		a.innerHTML = "Add";
		document.body.appendChild(a);
    a.className='add';
}	

function inputa(){
	input = document.createElement("input");
		input.type = "text";
		input.value = "21";
		document.body.appendChild(input);
}

function ula(){
	ul = document.createElement("ul");
	ulAttr = document.createAttribute("id");
	ulAttr.value = "demo";
	ul.setAttributeNode(ulAttr);
	document.body.appendChild(ul);


}

inputa();
button();
ula();
function list() {
li = document.createElement("li");
	li.innerHTML = input.value;
	ul.appendChild(li); //not document.ul, as mentioned in comments!
}

a.addEventListener("click", list);
}

<p onclick="Add();">Test</p>

你需要一个额外的功能，以及按钮的事件监听器：

function list() {
li = document.createElement("li");
    li.innerHTML = input.value;
    ul.appendChild(li);
}

a.addEventListener("click", list);

将创建li并将内容放入列表项。

P.S。我已经删除了第一个li的自动插入（在ula（）函数中），但如果需要，可以保留它。

创建待办事项列表的问题

1 个答案: