How to add a list item to an existing list using JavaScript
Question
So I'm trying to add a list item to the current list items using javascript but the code is only adding the text and not replicating what the other list items look like. How can I add the list item exactly the same way the other items look?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>Practice Manipulating the DOM</title>
</head>
<body>
<div class="container">
<h1></h1>
<p class="desc"></p>
<ul>
<li><input> Play music</li>
<li><input> Swim</li>
<li><input> Bike ride</li>
<li><input> Code</li>
</ul>
<div class="extra">
<p>This is extra content you need to delete.</p>
</div>
</div>
<script src="js/scripts.js"></script>
</body>
</html>
// 5: Create a new list item and add it to the <ul>
let ul = document.getElementsByTagName('ul')[0];
let li = document.createElement('li')
ul.appendChild(li).innerText ='Programmer';
5 answers
solution1
0 2020-02-26 03:50:28
Try like so
let ul = document.querySelector('ul'); let li = document.createElement('li') let input = document.createElement('input') li.append(input); li.append(' Programmer'); ul.append(li);
<div class="container"> <h1></h1> <p class="desc"></p> <ul> <li><input> Play music</li> <li><input> Swim</li> <li><input> Bike ride</li> <li><input> Code</li> </ul> <div class="extra"> <p>This is extra content you need to delete.</p> </div> </div>
solution2
0 ACCPTED 2020-02-26 03:52:38
let ul = document.getElementsByTagName('ul')[0];
let li = document.createElement('li')
ul.appendChild(li).innerHTML ='<li><input>Programmer</li>';
solution3
0 2020-02-26 03:53:04
What you want to do is add the inner text before appending the <li> element. So you can get that text to live within the <li> tags. Like so:
let ul = document.getElementsByTagName('ul')[0];
let li = document.createElement('li');
li.innerText = 'Programmer';
ul.appendChild(li);
This way the <li> gets your text as you might have expected it to. Which results in the following HMTL:
<ul>
<li>Programmer</li>
</ul>
Alternatively you could give the <li> an innerHtml with a <p> so it's not empty text inside the list item. Makes for better markup practices because it's easier to manage, read, and style text that's within appropriate tags. See below example for innerHTML:
let ul = document.getElementsByTagName('ul')[0];
let li = document.createElement('li');
li.innerHTML = '<p>Programmer</p>';
ul.appendChild(li);
to get a result like below:
<ul>
<li>
<p>Programmer</p>
</li>
</ul>
Finally bringing it all together, you'll see below using the innerHTML approach, but you can swap out with the innerText if that's preferred:
let ul = document.getElementsByTagName('ul')[0]; let li = document.createElement('li'); li.innerHTML = '<p>Programmer</p>'; ul.appendChild(li);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/main.css"> <title>Practice Manipulating the DOM</title> </head> <body> <div class="container"> <h1></h1> <p class="desc"></p> <ul> <li><input> Play music</li> <li><input> Swim</li> <li><input> Bike ride</li> <li><input> Code</li> </ul> <div class="extra"> <p>This is extra content you need to delete.</p> </div> </div> <script src="js/scripts.js"></script> </body> </html>
solution4
0 2020-02-26 03:57:14
You are missing the input element
let ul = document.getElementsByTagName('ul')[0];
let li = document.createElement('li')
li.innerHTML = " <input> Programmer";
ul.appendChild(li);
solution5
0 2020-02-26 04:05:01
To add a list item in an easy way, you could use jQuery,
$('ul').append("<li>What you want in your list item</li>");
Another way to do it in Vanilla JS is,
document.querySelector('ul').innerHTML = "<li><input> Play music</li>
<li><input> Swim</li>
<li><input> Bike ride</li>
<li><input> Code</li>
<li>What you want in your list item</li>";
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.