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

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

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

您也可以更改点击方法，在 a 上使用

function addOnClick(j) { 

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

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

  });

};

Answer 2

您实际上从未添加过锚标记。您正在创建一个列表项（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>

有几点需要注意：

我修改了您的addOnClick()函数，因为它是需要 onclick 的锚元素，而不是列表项。
我添加了一个锚元素，而不是简单地创建一个列表项并将href添加到该元素中。

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感谢您完整评论的代码。它有帮助!!!

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

3 个答案: