添加带有 javascript 的超链接到 html 下拉列表 div

Question

我正在尝试向此下拉菜单添加更多链接，菜单本身有效，我提供的链接也有效，问题是当我尝试通过 Javascript 添加链接时使用 appendChild 的文件，似乎没有任何事情发生。在其他代码中表单处理也是成功的，唯一错误的是上面描述的。

dropdown.html

<body>
<form id="aform">
  URL:<br>
  <input type="text" name="URL" id="URL">
  <br>
  Bookmark Name:<br>
  <input type="text" name="bookmarkname" id="bookmarkname">
  <br><br>
  <input type="submit" id="formsubmit">
</form> 
<div class="dropdown">
  <button class="dropbtn" id="dropdown">Links</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="https://youtube.com">Youtube</a>
    <a href="https://www.amazon.com">Amazon</a>
    <a href="https://www.yahoo.com">Yahoo</a>
  </div>
</div>
<script src="dropdown.js"></script>

dropdown.js

function retrieveFormData() {
            var URL = document.getElementById("URL").value;
            var Bookmarkname = document.getElementById("bookmarkname").value;
            var y = document.getElementById("myDropdown");
            var aTag = document.createElement('a');
            aTag.appendChild(document.createTextNode(Bookmarkname))
            aTag.href = URL;
            y.appendChild(aTag);
}

所以我尝试向'y'追加新内容，但实际下拉菜单中没有任何反应，没有添加。

Answer 1

这个：

var Bookmarkname = document.getElementById("bookmarkname").value;

...将 Bookmarkname 设置为 #bookmarkname 的 字符串 值。然后你有这一行：

aTag.appendChild(Bookmarkname);

appendChild 用于附加一个 child DOM Node；它不适用于设置文本，因此您可能会得到一个没有内容的 link。但是，您可以执行 aTag.appendChild(document.createTextNode(Bookmarkname)).

Answer 2

那是因为您使用了提交按钮。提交按钮告诉浏览器将表单的内容发送到服务器端。

您要做的是将提交按钮更改为常规按钮并添加一个 onclick 事件。

<body>
<form id="aform">
  URL:<br>
  <input type="text" name="URL" id="URL">
  <br>
  Bookmark Name:<br>
  <input type="text" name="bookmarkname" id="bookmarkname">
  <br><br>
  <input type="button" id="formsubmit" onclick="retrieveFormData();" value="Submit">
</form> 
<div class="dropdown">
  <button class="dropbtn" id="dropdown">Links</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="https://youtube.com">Youtube</a>
    <a href="https://www.amazon.com">Amazon</a>
    <a href="https://www.yahoo.com">Yahoo</a>
  </div>
</div>
<script src="forminput.js"></script>

添加带有 javascript 的超链接到 html 下拉列表 div

Adding hyperlinks with javascript to html drop down div

html

javascript

href

appendchild

drop-down-menu