javascript link() 方法输出列表

Question

我正在尝试创建书签 html 文件供个人使用。它使用 javascript "string.link()" 方法。问题是它只输出一次。我希望它循环并收集我输入的所有链接。

这是 html 文件：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bookmarks</title>
  <script>
    function toURL() {
      debugger
      var strText = document.getElementById("url_descrip").value;
      var strText1 = document.getElementById("url").value;
      var result = strText.link(strText1); // url address        
      document.getElementById("itemlist").innerHTML = result;
    }
  </script>
</head>

<body>
  <form>

    <input type="text" name="Descrip" id="url_descrip" placeholder="Descrip">
    <input type="text" name="URL" id="url" placeholder="URL">
    <input type="button" value="Submit" id="btnSubmit" onclick="toURL()">
  </form>
  <div>
    <ol id="itemlist"></ol>
  </div>
</body>

</html>

Answer 1

据我了解，您想将此 link 添加到 #itemlist。只需使用

document.getElementById("itemlist").innerHTML += result + '<br />';

这会将结果添加到 #itemlist 的现有内容中，并在其后添加换行符以在新行中获取每个 link。

Answer 2

您需要将文件保存在某个地方，并且您需要能够再次阅读它。

目前，如果只显示一个列表，您可以这样做

document.getElementById("itemlist").innerHTML += '<li>' + result + '</li>'

或更节省的东西：

const links = [];
document.getElementById("urlForm").addEventListener("submit", function(e) {
  e.preventDefault();
  var strText = document.getElementById("url_descrip").value;
  var strText1 = document.getElementById("url").value;
  links.push(strText.link(strText1)); // url address        
  document.getElementById("itemlist").innerHTML = `<li>${links.join("</li><li>")}</li>`
})

<form id="urlForm">
  <input type="text" name="Descrip" id="url_descrip" placeholder="Descrip">
  <input type="text" name="URL" id="url" placeholder="URL">
  <input type="submit" value="Submit">
</form>
<div>
  <ol id="itemlist"></ol>
</div>

Answer 3

改变

document.getElementById("itemlist").innerHTML = result;

至

document.getElementById("itemlist").append(Object.assign(document.createElement('li'), {innerHTML: result}));

javascript link() 方法输出列表

javascript link() method output in a list

javascript

loops

hyperlink