我如何编辑 Li 项目以使用 javascript 添加文本
我正在创建一个类似 trello 的网络应用程序用于练习，所以我已经完成了具有拖放功能的卡片，但我现在想将内容添加到 ul 标签的 li 项目中，甚至可以由用户编辑
我希望它在 javascript 中
HTML代码
<!DOCTYPE html>
<html>
<head>
<title>Trello</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/css/style.css" rel="stylesheet">
</head>
<body>
<!-- Masthead -->
<header class="masthead">
<div class="boards-menu">
<div class="board-search">
<input type="search" class="board-search-input" aria-label="Board Search">
<i class="fas fa-search search-icon" aria-hidden="true"></i>
</div>
</div>
<div class="logo">
<h1><i class="fab fa-trello logo-icon" aria-hidden="true"></i>Trello</h1>
</div>
<div class="user-settings" style="height: 20px;margin-bottom:35px;">
<a href="profile.html">
<img src="https://img.icons8.com/wired/64/000000/settings.png">
</a>
</div>
</header>
<!-- Lists container -->
<section class="lists-container">
<div class="list" id="dragabble_card">
<h3 class="list-title">Tasks to Do</h3>
<ul class="list-items" id="parent">
<li id="repeatTHIS"> </li>
</ul>
<button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
</div>
<div class="list" id="dragabble_card1">
<h3 class="list-title">Completed Tasks</h3>
<ul class="list-items" id="parent">
<li id="repeatTHIS"> </li>
</ul>
<button class="add-card-btn btn" id="button" onclick="repeat()">Add a card</button>
</div>
<div class="list" id="dragabble_card">
<h3 class="list-title">Tasks to Do</h3>
<ul class="list-items" id="parent">
<li id="repeatTHIS"> </li>
</ul>
哈士奇WWW1回答
-
MMTTMM
您可以使用名为的 HTML属性contenteditable，这将允许用户编辑元素上的 html 内容！但是，如果您需要保存更改，则必须AJAX在PHP页面中添加一些 javascript请求，以便将更改保存到数据库或文件或其他任何内容中。希望我的回答对你有用！window.isEditingALi=false;document.addEventListener("click", function(e){ //Of course you can merge this EventListener with the next one but I am separing them just to make things clear for you ! const elementsIdSelector="editableLi"; e=(e||window.event); e.preventDefault(); const path=e.path; for(var i=0;i<path.length-4;i++){ if(path[i].tagName=="LI"&&path[i].id==elementsIdSelector){ //Found a Li element with the id required ( Even dynamically created li would fires ! ) //Do whatever you want there path[i].addEventListener("click", function(){ if(this.getAttribute("contenteditable")!="true"){ const wantEdit=window.confirm("You want to edit this element content ?"); if(wantEdit){ this.setAttribute("contenteditable", true); window.isEditingALi=this; this.focus(); }else{ window.isEditingALi=false; } } }); } }});document.addEventListener("click", function(e){ e=(e||window.event); e.preventDefault(); const path=e.path; let canGetReset=true; for(var i=0;i<path.length-4;i++){ if(path[i]==window.isEditingALi) canGetReset=false; } if(canGetReset&&window.isEditingALi){ window.isEditingALi.removeAttribute("contenteditable"); //Here you can add your Ajax request or whatever function you want to do after the user finish editing the li .. alert("Li has been changed successfully !"); window.isEditingALi=false; }});//This is just an additional function to test if the dynamically created element would work or not !function createEditableLi(){ const ul=document.querySelector("ul"); const newLi=document.createElement("li"); newLi.setAttribute("id", "editableLi"); newLi.innerHTML="New Li (Created dynamically)"; ul.appendChild(newLi);}body{ font-family: Arial, sans-serif; font-size: 14px; }You can actually edit these Li by clicking and apply any changes you want ! (Even dynamically created elements are supported now!)<br><ul> <li id="editableLi"> First Li</li> <li id="editableLi"> Second Li</li> <li id="editableLi"> Third Li</li> <li id="editableLi"> Another Li</li> <li id="editableLi"> More Li</li></ul><br><button onclick="createEditableLi()">Create a New Li Dynamically</button>
随时随地看视频慕课网APP
相关分类
JavaScript