Is there any way to add new list item using innerHTML in JavaScript?

Question

I’m trying to use innerHTML to add an li item according to user input (in a textbox). Is there any way to create new list item other than using createElement or appendChild?

const user = document.getElementById('btn');
const inputEle = document.getElementById("submit");
const userList = document.getElementById('itemList');

user.addEventListener('click', (e) => {
  userList.innerHTML += `<li>${inputEle.value}</li>`;
});

<input type="text" id="submit">

<button type="button" id="btn">Add</button>

<ul id="itemList"></ul>

Please have a look https://stackoverflow.com/questions/17773938/add-a-list-item-through-javascript — Zahid Karim, May 14 '20 at 10:27
is there a reason for not creating an element or appending a child? — Argee, May 14 '20 at 10:29
What is wrong with your proposed solution? I have created a snippet for you and it works fine. — Turnip, May 14 '20 at 10:32
My solution doesn't add multiple li items to my ul , it just adds 1 li item . — AnotherOne, May 14 '20 at 10:36
I don't understand. It works for me, I can add as many li as I want with your snippet — Richard, May 14 '20 at 10:38
@AnotherOne Edit the Stack Snippet within your question so that it behaves in the way that you describe. — Turnip, May 14 '20 at 10:41
Thank you i found out that i have inserted button and input inside ul that is why it just works 1 time thanks to everyone — AnotherOne, May 14 '20 at 10:45

score 0 · Answer 1 · answered May 14 '20 at 10:47

0

I found out that the problem is in html file, where i put my button and input inside ul

<ul>
<input type="text"  id="submit" >
<button type="button" id="btn">Add</button>
</ul>

answered May 14 '20 at 10:47

AnotherOne

78
2
11

Is there any way to add new list item using innerHTML in JavaScript?

1 Answers1