所以我試圖列出用戶的輸入，我一直收到這個錯誤
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDo</title>
</head>
<body>
<h1>To Do List</h1>
<label>Enter What You Have To Do:</label>
<br>
<br>
<input type="text" id="toDo">
<br>
<br>
<button type="button" id="myButton">Submit</button><br>
<ul id="list"></ul>
<script src="todojs.js"></script>
</body>
</html>
javascript
document.getElementById('myButton').onclick = function () {
const doIt = document.getElementById('toDo').value;
const li ='<li>' doIt '</li>';
document.getElementById('list').appendChild(li);
document.getElementById('toDo').value = '';
}
錯誤未捕獲型別錯誤：無法在 'Node' 上執行 'appendChild'：引數 1 不是 'Node' 型別。在 document.getElementById.onclick
uj5u.com熱心網友回復：
appendChild需要一個Node元素。您正在傳遞一個字串。如果要附加字串，可以使用該insertAdjacentHTML函式。
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
document.getElementById('myButton').onclick = function () {
const doIt = document.getElementById('toDo').value;
const li ='<li>' doIt '</li>';
document.getElementById('list').insertAdjacentHTML('beforeend', li);
document.getElementById('toDo').value = '';
}
uj5u.com熱心網友回復：
const li = document.createElement("li");
li.innerHTML(doIt);
應該做的伎倆而不是一個班輪
uj5u.com熱心網友回復：
如果您傳遞一個字串，該字串不是nodeDOM 中存在的一個或真實元素，它就不起作用。
所以只需以編程方式創建一個元素！使用document.createElement()
更改其中的文本，使用document.textContent
盡量不要使用
innerHTML，因為是危險的，有人可以在輸入中插入一些惡意代碼腳本。textContent更安全
還有一件事，使用.addEventListener()
代替.onclick，
因為如果您一次有更多事件偵聽器，.onclick有時不起作用，
您.addEventListener()可以一次使 2 個或更多事件起作用。
在您可以使用之前插入：https ://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore ，只需閱讀我鏈接到您的檔案，您就完成了！
我希望這對你有幫助！
還有一件事：
如果您想要更多自定義 UI，
您可以在 a 中撰寫所有元素的副本<div>，
然后<template>手動將其插入到標簽中...
結果是：現在你有了一個可重用的組件，只有常規的HTML, JS
所以document.createElement();它會變成以前的Node.cloneNode()
更多細節在這里：https ://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode
let btn = document.getElementById('myButton');
let list = document.getElementById('list');
let inputEl = document.getElementById('toDo');
btn.addEventListener('click', () => {
const getliValue = inputEl.value;
const newLi = document.createElement('li');
newLi.textContent = getliValue;
list.appendChild(newLi);
inputEl.value = '';
});<h1>To Do List</h1>
<label>Enter What You Have To Do:</label>
<br><br>
<input type="text" id="toDo">
<br><br>
<button type="button" id="myButton">Submit</button>
<br>
<ul id="list"></ul>
<script src="script.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/493634.html
標籤：javascript html css 列表 javascript 对象