3 回答

TA貢獻1804條經(jīng)驗 獲得超8個贊
我想這就是你想要的:
(function () {
document.querySelector('#add').addEventListener('click', function () {
let input = document.querySelector('#text');
let list = document.querySelector('#list');
let item = document.createElement('li'); // create li node
let itemText = document.createTextNode(input.value); // create text node
item.appendChild(itemText); // append text node to li node
list.appendChild(item); // append li node to list
input.value = ""; // clear input
});
})();
<div>
<input id="text" type="text" />
<button id="add">Add</button>
</div>
但是,請在將來提出更具體的問題。我什至不知道您的問題是什么,因為您沒有提供所有代碼。此外,您問題的最后一句話根本沒有告訴我任何有用的信息(..“我希望按鈕正常工作,并通過單擊按鈕(帶有輸入的信息)在頁面中顯示元素”..)。
<ul id="list">
<li>example item</li>
</ul>

TA貢獻1712條經(jīng)驗 獲得超3個贊
過于簡化了,但是嘿,它有效:
function AddLi(str)
{
var li = document.createElement('li');
li.appendChild(document.createTextNode(str))
li.innerHTML += ' <button onclick="this.parentNode.remove()">-</button>';
document.getElementById("out").appendChild(li);
}
<form>
<input type="text" name="userinput">
<input type="button" value="Add LI" onclick="AddLi(userinput.value)">
</form>
<span id="out"/>

TA貢獻1779條經(jīng)驗 獲得超6個贊
試試
function addBook(book) {
list.innerHTML +=
`<li>${esc(book.value)} <button onclick="del(this)">Del</button></li>`;
book.value = '';
}
function del(item) {
item.parentNode.remove();
}
function esc(s) {
return s.replace(/[&"<>]/g,c =>
({'&':"&",'"':""",'<': "<",'>':">"}[c]));
}
<ul id="list"></ul>
<input id="data" type="text" />
<button onclick="addBook(data)">Add</button>
添加回答
舉報