使用 appendChild、setAttribute 等格式化 href 链接

Question

我正在尝试通过 javascript 使用 href 链接填充列表。

这是我要创建的 html 示例：

<li> <a href="#modal-one">Complete blood count</a></li>

“#modal-one”显示弹出窗口的位置。

我已经使用以下和其他几个迭代来尝试动态创建它：

<script>
var listItem = [];
    function createTestList() {

        var tests = results.tests;  //an array to tests to populate list
        var i;
    var j;

        for (i = 0; i < tests.length ; i++ ){ 

            listItem[i] = document.createElement("li");
            var node = document.createTextNode(tests[i].name);
            listItem[i].appendChild(node);
      listItem[i].setAttribute("href", "#modal-one");
            addOnClick(i);
            //var element = document.getElementById("div1");
            //element.appendChild(listItem[i]);

    document.body.appendChild(listItem[i]);
    console.log(listItem[i]);
        };
};
function addOnClick(j) {  //this is separate to handle the closure issue

listItem[j].onclick =  function() {loadModal(j)};
};
</script>  

但是，这段代码（和其他几个）会产生：

<li href='#modal-one'>Complete Blood Count</li>  //note missing <a>...</a>

似乎有几种方法可以实现这一点，但似乎没有什么对我有用...

Answer 1

您实际上从未添加过锚标记。您正在创建一个列表项 (li)，但您正在向该列表项添加一个 href，而不是使用该 href 向它添加一个锚节点。因此，浏览器只会认为您有一个带有 href 属性的列表项。

考虑改用以下内容：

<script>
var listItem = [];
    function createTestList() {

        var tests = results.tests;  //an array to tests to populate list
        var i;
        var j; // Never actually used in function. Consider omitting

        for (i = 0; i < tests.length ; i++ ){ 

            // create the list item
            listItem[i] = document.createElement("li");

            // Create the anchor with text
            var anchor = document.createElement("a");
            var node = document.createTextNode(tests[i].name);
            anchor.appendChild(node);
            anchor.setAttribute("href", "#modal-one");

            // Set the onclick action
            addOnClick(i, anchor);

            // Add the anchor to the page
            listItem[i].appendChild(anchor);

            document.body.appendChild(listItem[i]);
            console.log(listItem[i]);
        };
};

// Modified "addOnClick" to include the anchor that needs the onclick
function addOnClick(j, anch) {  //this is separate to handle the closure issue

     anch.onclick =  function() {loadModal(j)};
};
</script> 

需要注意的几点：

1. 我已经修改了您的addOnClick() 函数，因为它是需要onclick 的锚元素，而不是列表项。
2. 我在创建锚元素时添加了内容，而不是简单地创建一个列表项并将 href 添加到其中。

Answer 2

我没有看到创建 a 元素，将代码更改为：

var aNode=document.createElement("a");
aNode.innerText=tests[i].name;
aNode.setAttribute("href", "#modal-one");
listItem[i].appendChild(aNode);

您也可以更改点击方法，将其用于 a 而不是 li

function addOnClick(j) { 

  listItem[j].querySelector("a").addEventListener("click",function(e) {

     e.preventDefault();//this prevent for going to hash in href  
     loadModal(j);

  });

};

Answer 3

好的。我错过了锚标签。我的坏...

Spencer 的回答很接近，但我必须进行一些更改才能使其在我的实例中正常工作。

最终的工作代码（老实说我不确定它为什么工作）是：

<script>
var listItem = [];
    function createTestList() {

        var tests = results.tests;
        var i;
    //var j;

        for (i = 0; i < tests.length ; i++ ){ 

             // create the list item
        listItem[i] = document.createElement("li");

        // Create the anchor with text
        var anchor = document.createElement("a");
        anchor.setAttribute("href", "#modal-one");
        var node = document.createTextNode(tests[i].name);
        anchor.appendChild(node);


        // Set the onclick action
        addOnClick(i);

        // Add the anchor to the page
        listItem[i].appendChild(anchor);

        document.getElementById("demo").appendChild(listItem[i]);  //added the list to a separate <div> rather than body. It works fine like this.
        console.log(listItem[i]);
        };
};
function addOnClick(j) {  //this is separate to handle the closure issue

//didn't need the additional code beyond this
listItem[j].onclick =  function() {loadModal(j)};
};
 </script>  

感谢所有人，感谢 Spencer 对代码的详尽注释。有帮助！！！