单击提交按钮时如何使用JavaScript将li元素添加到ul

debugcn 发表于 Dev

屋

我的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吗？

尼科说

您说您无法修改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>

希望能帮助到你。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。