我想添加新的文本節點和新的 li 元素，但結果是一個新的 li 空標簽和一個新的分隔字串。
該字串應該在創建的 li 標簽內。
也許我的問題很容易回答，但我仍然不明白如何將新字串添加到標簽中，因為它們是單獨插入到 DOM 中的。
檢查結果
有任何想法嗎 ？
源代碼如下
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>uj5u.com熱心網友回復：
無需創建 textNode。只需innerText在<li>您創建的元素上設定屬性，并將 附加<li>到<ul>元素。
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>uj5u.com熱心網友回復：
您只需要以這種方式修改您的 Javascript 代碼：
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);
}
uj5u.com熱心網友回復：
您需要將文本節點附加到linot thelist
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/360487.html
標籤：javascript
上一篇：檢查是否在ES6中找到另一個陣列