Question

<ul id="add-message"></ul>

document.querySelector("#submit").onclick = () => {
  const li = document.createElement('li');
  li.innerHTML = document.querySelector('#message').value;
  document.querySelector('#add-message').append(li);       
};

<form>
  <input type="text" id="message">
  <input type="submit" id="submit">
</form>

问题是，这可以创建动态列表，但我想使其可点击这样我就可以通过单击列表元素来创建弹出输入。

我需要这样的东西

 <div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>

显示用户可以看到它是可单击的，因此如何动态添加href和class属性

Answer 1

在onclick上添加li，然后追加到dom。

<ul id="add-message">

 </ul>


document.querySelector("#submit").onclick = ()=>{
const li = document.createElement('li');
li.innerHTML = document.querySelector('#message').value;
li.onclick = function(){
console.log("clicked");
}
document.querySelector('#add-message').append(li);       

};

<form>
<input type="text" id="message">
<input type="submit" id="submit">
</form>

Answer 2

您可以将点击事件添加到新创建的li中。由于按钮的类型为Submit，因此您还必须阻止默认事件（event.preventDefault()）停留在页面上：

document.querySelector("#submit").onclick = (event)=>{
  const li = document.createElement('li');
  li.addEventListener('click', function(){
    console.log('You have clicked: ',this.textContent);
  });
  li.innerHTML = document.querySelector('#message').value;
  document.querySelector('#add-message').append(li);  
  event.preventDefault();
};

<ul id="add-message">

</ul>



<form>
  <input type="text" id="message">
  <input type="submit" id="submit">
</form>

Answer 3

您需要防止input type = submit的默认行为，然后使用event.target从点击时从li获取内容

document.querySelector("#submit").onclick = (e) => {
  e.preventDefault();
  const li = document.createElement('li');
  li.innerHTML = document.querySelector('#message').value;
  document.querySelector('#add-message').append(li);
};

document.querySelector("#add-message").addEventListener('click', function(e) {
  console.log(e.target.innerHTML)

})

<ul id="add-message">

</ul>

<form>
  <input type="text" id="message">
  <input type="submit" id="submit">
</form>

在html中创建可点击列表

3 个答案: