如何在JavasciptDom中添加帶有文本的元素-有解無憂

我目前在我的待辦事項清單上作業。

我設法從我的輸入中獲取文本值，但我現在不知道如何在文本區域內添加文本值和元素。我想將我輸入的文本添加到無序串列的文本區域內。

綠色是輸入欄位，我想從白色欄位中獲取它如何在 Javascipt Dom 中添加帶有文本的元素

//query select to get button

let btn = document.querySelector('.add');
// selector to selct undorder list inside todotex
const ul = document.querySelector('.list');
//selector for input
const input = document.querySelector('input');

// eventlistner by button clicked

btn.addEventListener('click', function() {
  var txt = input.value;
  let li = document.createElement('li').innerHTML(txt);
  ul.append(li);
});

<div class="card">
  <div class="todoheader">TODO List</div>
  <div class="todotext"></div>
  <ul class="list">

  </ul>
  <div class="addtodo">
    <button class="add" type="button">   </button>
    <input type="text" class="input" placeholder="add todo"></input>
  </div>
</div>

uj5u.com熱心網友回復：

正如@CBroe 的評論。替換innerHTML(txt);為innerHTML = txt;

uj5u.com熱心網友回復：

https://jsfiddle.net/Memorynotfound/obhq8x50/

我發現這個 JSFiddle 可能會有所幫助。谷歌是你最好的朋友。

本指南對此進行了解釋： https://memorynotfound.com/dynamically-addremove-items-list-javascript/

function addItem(){
    var ul = document.getElementById("dynamic-list");
  var candidate = document.getElementById("candidate");
  var li = document.createElement("li");
  li.setAttribute('id',candidate.value);
  li.appendChild(document.createTextNode(candidate.value));
  ul.appendChild(li);
}

function removeItem(){
    var ul = document.getElementById("dynamic-list");
  var candidate = document.getElementById("candidate");
  var item = document.getElementById(candidate.value);
  ul.removeChild(item);
}

<ul id="dynamic-list"></ul>

<input type="text" id="candidate"/>
<button onclick="addItem()">add item</button>
<button onclick="removeItem()">remove item</button>

uj5u.com熱心網友回復：

正如@CBroe 所說，innerHTML 是一種屬性，而不是一種方法。而不是這樣

let li = document.createElement("li").innerHTML(txt);
ul.append(li);

利用：

let li = document.createElement("li");
li.innerHTML = txt;
ul.append(li);

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/529498.html

標籤：javascript

上一篇：JavaScript：生成亂數生成的陣列

下一篇：如果條件為假，如何不創建輸入？