Question

我正在创建html页面，需要在点击按钮时动态创建链接列表。我知道如何在以前知道要创建的链接数量时创建此列表：

    //For 4 tags:
    var mydiv = document.getElementById("myDiv");
    var aTag = document.createElement('a');
    aTag.innerHTML = "link1 text";
    aTag.setAttribute('onclick',"func()");
    mydiv.appendChild(aTag);
    var bTag = document.createElement('b');
    bTag.innerHTML = "link2 text";
    bTag.setAttribute('onclick',"func()");          
    mydiv.appendChild(bTag);
    var cTag = document.createElement('c');
    cTag.innerHTML = "link3 text";
    cTag.setAttribute('onclick',"func()");
    mydiv.appendChild(cTag);
    var dTag = document.createElement('d');
    dTag.setAttribute('onclick',"func()");
    dTag.innerHTML = "link4 text";
    mydiv.appendChild(dTag);

但问题是计数将在运行时知道，并且在函数调用时我需要识别调用函数的链接的ID。任何人都可以帮忙吗？

Answer 1

是的，可以在运行时执行此操作。 JQuery提供了非常有用的dom操作。所以你可以遍历dom，过滤你需要的东西..

你可以在这里找到很多有用的功能。 http://api.jquery.com/category/traversing/

它看起来像这样。

 $( document ).ready(function() {

   $( "a" ).each(function( index ) { 

    // enter code here..
   }
});

一旦DOM加载，

document.ready就会被调用。

Answer 2

我不知道你收到的天气，或者不知道要在锚中显示的HTML，但无论如何，这应该做的工作：

function createAnchor(id, somethingElse) {
    var anchor = document.createElement('a');
    anchor.innerHTML = "link" + id + " text";
    anchor.setAttribute("onclick", "func()");
    return anchor;
}

然后你调用这样的函数：

function main(num_anchors) {
    var mydiv = document.getElementById("myDiv");
    for (var i = 0; i < num_anchors; i += 1) {
        mydiv.appendChild(createAnchor(i));
    }
}

当然这段代码可以改进，但这只是为了展示如何做到这一点。

如何动态创建<a> tags using js</a>列表

2 个答案: