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>

is there a reason for not creating an element or appending a child? — Argee
– Argee, Commented May 14, 2020 at 10:29
What is wrong with your proposed solution? I have created a snippet for you and it works fine. — Turnip
– Turnip, Commented May 14, 2020 at 10:32
My solution doesn't add multiple li items to my ul , it just adds 1 li item . — AnotherOne
– AnotherOne, Commented May 14, 2020 at 10:36
I don't understand. It works for me, I can add as many li as I want with your snippet — Richard
– Richard, Commented May 14, 2020 at 10:38

AnotherOne · Accepted Answer · 2020-05-14 10:47:24Z

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, 2020 at 10:47

AnotherOne

1113 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related