第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

創(chuàng)建 <li> 并在其上添加用戶輸入的按鈕

創(chuàng)建 <li> 并在其上添加用戶輸入的按鈕

哈士奇WWW 2021-08-20 19:17:55
練習說我的按鈕(如提交)必須使用用戶在input 標簽中設(shè)置的信息,并創(chuàng)建一個以文本為內(nèi)容的li 標簽。這是我的第一個 JavaScript 類,所以我仍然不熟悉語法。這是我的實際代碼。我將 aquerySelector與id我現(xiàn)有的ul 標記一起使用,并使用 addEventListener 為單擊操作創(chuàng)建事件。我不記得如何正確創(chuàng)建新的li 標簽,也不知道如何使用內(nèi)容作為它的信息。let myElement = document.querySelector('#add-book');myElement.addEventListener("click", (e) => {if (e.target.classList == 'button-add') {    let liElement = document.createElement('li');    let content = document.appendChild(liElement);    content.textContent();    }}); 我希望按鈕正常工作,并通過單擊按鈕(帶有輸入的信息)在頁面中顯示元素。
查看完整描述

3 回答

?
胡說叔叔

TA貢獻1804條經(jīng)驗 獲得超8個贊

我想這就是你想要的:


(function () {

  document.querySelector('#add').addEventListener('click', function () {

    let input = document.querySelector('#text');

    let list = document.querySelector('#list'); 

    

    let item = document.createElement('li'); // create li node

    let itemText = document.createTextNode(input.value); // create text node

    

    item.appendChild(itemText); // append text node to li node

    list.appendChild(item); // append li node to list

    

    input.value = ""; // clear input

  });

})();

<div>

  <input id="text" type="text" />

  <button id="add">Add</button>

</div>

但是,請在將來提出更具體的問題。我什至不知道您的問題是什么,因為您沒有提供所有代碼。此外,您問題的最后一句話根本沒有告訴我任何有用的信息(..“我希望按鈕正常工作,并通過單擊按鈕(帶有輸入的信息)在頁面中顯示元素”..)。

<ul id="list">

  <li>example item</li>

</ul>


查看完整回答
反對 回復(fù) 2021-08-20
?
交互式愛情

TA貢獻1712條經(jīng)驗 獲得超3個贊

過于簡化了,但是嘿,它有效:


function AddLi(str)

{

    var li = document.createElement('li');

    li.appendChild(document.createTextNode(str))

    li.innerHTML += ' <button onclick="this.parentNode.remove()">-</button>';

    document.getElementById("out").appendChild(li);

}

<form>

    <input type="text" name="userinput">

    <input type="button" value="Add LI" onclick="AddLi(userinput.value)">

</form> 

<span id="out"/>


查看完整回答
反對 回復(fù) 2021-08-20
?
哆啦的時光機

TA貢獻1779條經(jīng)驗 獲得超6個贊

試試


function addBook(book) {

  list.innerHTML += 

    `<li>${esc(book.value)} <button onclick="del(this)">Del</button></li>`;

  book.value = '';

}


function del(item) {

  item.parentNode.remove();

}


function esc(s) {

    return s.replace(/[&"<>]/g,c => 

      ({'&':"&amp;",'"':"&quot;",'<': "&lt;",'>':"&gt;"}[c]));

}

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


<input id="data" type="text" />

<button onclick="addBook(data)">Add</button>


查看完整回答
反對 回復(fù) 2021-08-20
  • 3 回答
  • 0 關(guān)注
  • 455 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號