单击提交按钮时如何使用 JavaScript 将 li 元素添加到 ul
我的HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Competition</title>
<link href="css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP|Pacifico&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<header>
<h1>Football</h1>
<p>A Fottball Competition App</p>
<form id="registrar">
<input type="text" id="txtVal" name="name" placeholder="Invite Team">
<button type="submit" onclick="addLi()" name="submit" value="submit">Submit</button>
</form>
</header>
<div class="main">
<h2>Invitees</h2>
<ul id="invitedList">
</ul>
</div>
</div>
<script type="text/javascript" src="javascript/app.js"></script>
</body>
</html>
我必须添加 JavaScript，这样当您在输入字段中输入字符串并单击“提交”时，它就会<li>向<ul>.
我尝试使用以下脚本：
function addLi()
{
var txtVal = document.getElementById('txtVal').value,
listNode = document.getElementById('invitedList'),
liNode = document.createElement("LI"),
txtNode = document.createTextNode(txtVal);
liNode.appendChild(txtNode);
listNode.appendChild(liNode);
}
但由于该按钮具有submit重新加载页面的类型并且<li>消失。
有没有办法在不编辑 HTML 的情况下做到这一点？
鸿蒙传说2回答
-
德玛西亚99
你说你不能修改你的 HTML，所以这是我找到的解决方案。您想要阻止表单提交。您可以通过以下方式做到这一点：const myForm = document.querySelector('#registrar');myForm.addEventListener("submit", function(evt) { evt.preventDefault();});请参阅工作片段：function addLi() { var txtVal = document.getElementById('txtVal').value, listNode = document.getElementById('invitedList'), liNode = document.createElement("LI"), txtNode = document.createTextNode(txtVal); liNode.appendChild(txtNode); listNode.appendChild(liNode);}const myForm = document.querySelector('#registrar');myForm.addEventListener("submit", function(evt) { evt.preventDefault();}); <div class="wrapper"> <div> <h1>Football</h1> <p>A Fottball Competition App</p> <form id="registrar"> <input type="text" id="txtVal" name="name" placeholder="Invite Team"> <button type="submit" onclick="addLi()" name="submit" value="submit">Submit</button> </form> </div> <div class="main"> <h2>Invitees</h2> <ul id="invitedList"> </ul> </div> </div> -
慕哥9229398
您只需要更改html中的提交按钮并为提交事件监听器添加preventDefault超文本标记语言/* Replace the button to input as below */<input type="submit" value="Submit">JS/* Adding eventlistener for the form submit */const form = document.getElementById('registrar');form.addEventListener('submit', addLi);function addLi(e) { /* Prevent the default functionality - in this case it is, reloading page */ e.preventDefault(); /* ...the rest of the function code */}如果有任何不清楚的地方，请随时询问。
随时随地看视频慕课网APP
相关分类
Html5