Javascript 在html中创建可单击列表 document.querySelector（“#提交”）.onclick=（）=>{ const li=document.createElement（'li'）； li.innerHTML=document.querySelector（“#message”）.value； document.querySelector（“#添加消息”）.append（li）； };

问题是，这可以创建动态列表，但我喜欢使其可点击 所以我通过点击列表元素来创建弹出式输入

我需要这样的东西

<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>

---

显示用户可以看到它是可单击的，因此如何在附加到

dom

之前在

li

上单击

动态添加href和class属性

 <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>



document.querySelector（“#提交”）.onclick=（）=>{
const li=document.createElement（'li'）；
li.innerHTML=document.querySelector（“#message”）.value；
li.onclick=函数（）{
控制台日志（“单击”）；
}
document.querySelector（“#添加消息”）.append（li）；
};
您可以将单击事件添加到新创建的
li
。由于按钮类型为submit，您还必须防止默认事件（
event.preventDefault（）
）留在页面上：


document.querySelector（“提交”）.onclick=（事件）=>{
const li=document.createElement（'li'）；
li.addEventListener（'click'，function（））{
console.log（'您已单击：'，this.textContent）；
});
li.innerHTML=document.querySelector（“#message”）.value；
document.querySelector（“#添加消息”）.append（li）；
event.preventDefault（）；
};


您需要防止
输入类型=submit
的默认行为，然后使用
event.target
从
li
单击获取内容


document.querySelector（“提交”）.onclick=（e）=>{
e、 预防默认值（）；
const li=document.createElement（'li'）；
li.innerHTML=document.querySelector（“#message”）.value；
document.querySelector（“#添加消息”）.append（li）；
};
document.querySelector（“#add message”）.addEventListener（'click'，函数（e）{
log（e.target.innerHTML）
})


为什么不在
li
上附加一个点击事件？您可以根据需要采用
<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>