我創建了標簽，但它沒有顯示在網頁上

Question

當我按下“添加 TODO”時應該會發生這種情況，如果它是空的，它應該在輸入“輸入你的 TODO”后創建 ap 標簽，現在雖然 js 正在創建元素但它沒有顯示在網頁上

HTML：

<h1 class="head">MY LIST</h1>
<input type="text" id='input'>
<button id='add' type="buttton">ADD TODO</button><br>

刪除待辦事項
刪除所有內容

JS：

function addItem() {

    var input =document.getElementById('input');
    var textNode = document.createTextNode(input.value)

    if(input.value === '') {
  
        var par=document.createElement('p')
        par.textContent='enter TODO please';
        par.setAttribute('id','new')
   
        // I have only put here the if case
        document.querySelector('input').appendChild(par); 
    }
}

Answer 1

您需要確保為您的按鈕設置點擊事件。 現在，該按鈕只是調用默認操作而不是您的 function。 為此，按鈕的標簽需要是

<button id='add' type="button" onclick="addItem()">ADD TODO</button><br>

現在，您的按鈕正在嘗試將一個段落作為子項添加到輸入中，而不是之后。 要在需要將 JS 的最后一行更改為之后添加段落

document.querySelector('input').after(par);