I want to add new text node and a new li element but the result is a new li empty tag and a new separated string.
The string should be inside the created li tag.
Maybe my question is easy to answer but I really still don't understand how can the a new string can be added inside a tag since they are separately inserted into the DOM.
Inspecting results
any ideas ?
The source code is below
function Adding(){
let li = document.createElement('li')
let inputValue = document.getElementById('text').value;
let t = document.createTextNode(inputValue);
document.getElementById('list').appendChild(li);
document.getElementById('list').appendChild(t);
}
let btn = document.getElementById('btn');
btn.addEventListener('click', Adding)body {
background-color: aliceblue;
}
h1{
display: block;
margin: 10% auto 0 auto;
width: 300px;
color: #96e5ff;
}
.title{
display: block;
}
.form{
display: block;
}
input{
display: block;
margin: 10px auto 0 auto;
width: 300px;
padding: 10px;
border-radius: 10px;
border: 1px #d6eeff solid;
}
button{
display: block;
margin: 10px auto 0 auto;
width: 300px;
border-radius: 20px;
border: none;
padding: 10px;
background-color: snow;
border: solid 1px #d6eeff;
}
#list{
padding: 150px;
height: 300px;
max-width: 300px !important;
background-color: snow;
border-radius: 10px;
border: #d6eeff solid 1px;
display: block;
margin: 5px auto 0 auto
}
li{
list-style-type: none;
background-color: grey;
}<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List</title>
</head>
<body>
<div class="title">
<h1>TODO List using JS</h1>
</div>
<div class="form">
<input id="text" placeholder="Add something" type="text">
<button id="btn">Submit</button>
</div>
<ul id="list">
<li></li>
</ul>
</body>
<script src="app.js"></script>
</html>CodePudding user response：
There's no need to create a textNode. Just set the innerText property on the <li> element you created, and append the <li> to the <ul> element.
function Adding(){
let li = document.createElement('li')
li.innerText = document.getElementById('text').value;
document.getElementById('list').appendChild(li);
}
let btn = document.getElementById('btn');
btn.addEventListener('click', Adding)body {
background-color: aliceblue;
}
h1{
display: block;
margin: 10% auto 0 auto;
width: 300px;
color: #96e5ff;
}
.title{
display: block;
}
.form{
display: block;
}
input{
display: block;
margin: 10px auto 0 auto;
width: 300px;
padding: 10px;
border-radius: 10px;
border: 1px #d6eeff solid;
}
button{
display: block;
margin: 10px auto 0 auto;
width: 300px;
border-radius: 20px;
border: none;
padding: 10px;
background-color: snow;
border: solid 1px #d6eeff;
}
#list{
padding: 150px;
height: 300px;
max-width: 300px !important;
background-color: snow;
border-radius: 10px;
border: #d6eeff solid 1px;
display: block;
margin: 5px auto 0 auto
}
li{
list-style-type: none;
background-color: grey;
}<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List</title>
</head>
<body>
<div class="title">
<h1>TODO List using JS</h1>
</div>
<div class="form">
<input id="text" placeholder="Add something" type="text">
<button id="btn">Submit</button>
</div>
<ul id="list">
<li></li>
</ul>
</body>
<script src="app.js"></script>
</html>CodePudding user response：
You just need to modify your Javascript code in this way:
function Adding(){
let ul = document.getElementById("list");
let li = document.createElement("li");
let inputValue = document.getElementById('text').value;
li.appendChild(document.createTextNode(inputValue));
ul.appendChild(li);
}
CodePudding user response：
You need to append the text node to the li not the list
li.appendChild(t);
function Adding(){
let li = document.createElement('li')
let inputValue = document.getElementById('text').value;
let t = document.createTextNode(inputValue);
document.getElementById('list').appendChild(li);
li.appendChild(t);
}
let btn = document.getElementById('btn');
btn.addEventListener('click', Adding)body {
background-color: aliceblue;
}
h1{
display: block;
margin: 10% auto 0 auto;
width: 300px;
color: #96e5ff;
}
.title{
display: block;
}
.form{
display: block;
}
input{
display: block;
margin: 10px auto 0 auto;
width: 300px;
padding: 10px;
border-radius: 10px;
border: 1px #d6eeff solid;
}
button{
display: block;
margin: 10px auto 0 auto;
width: 300px;
border-radius: 20px;
border: none;
padding: 10px;
background-color: snow;
border: solid 1px #d6eeff;
}
#list{
padding: 150px;
height: 300px;
max-width: 300px !important;
background-color: snow;
border-radius: 10px;
border: #d6eeff solid 1px;
display: block;
margin: 5px auto 0 auto
}
li{
list-style-type: none;
background-color: grey;
}<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List</title>
</head>
<body>
<div class="title">
<h1>TODO List using JS</h1>
</div>
<div class="form">
<input id="text" placeholder="Add something" type="text">
<button id="btn">Submit</button>
</div>
<ul id="list">
<li></li>
</ul>
</body>
<script src="app.js"></script>
</html>