Question

我有一个看起来像这样的HTML

<div id="tabs"> 

  <ul id="ul_id"> 
    <li><a href="#tabs-1">tab 1</a></li> 
    <li><a href="#tabs-2">tab 2</a></li> 
    <li><a href="#tabs-3">tab 3</a></li> 
  </ul> 

  <div id="tabs-1"> <p>tab 1 contents</p> </div> 
  <div id="tabs-2"> <p>tab 2 contents</p> </div> 
  <div id="tabs-3"> <p>tab 3 contents</p> </div>

</div>

我需要做的是使这段代码动态化，因为标签的数量不固定。

到目前为止，我所做的是

<script>
  par = document.createElement('p')
  par.setAttribute("text","Adding nodes");
  dib = document.createElement('div')
  dib.setAttribute("id","tabs-4");
  dib.appendChild(par);
  test=document.getElementById("tabs")
  test.appendChild(dib);
  for(i=0; i< test.childNodes.length; i++)
  {
    document.getElementsByName
    if(test.childNodes[i].getAttribute("id") == "ul_id")
      alert("equal");
    else
      alert(test.childNodes[i].getAttribute("id"));
  }
</script>

为<p>

创建一个元素

为div

创建一个元素

将div元素追加（appendChild）到标签

现在我坚持获取标签的子节点的标签名称和id名称的部分。我需要将新条目添加到列表中。

我将如何做到这一点？

我想过使用getElementsByName，但这意味着我需要为ul添加名称属性。我不确定这是不是一个好主意，所以我想到其他可能的方法来做到这一点。请帮忙。感谢

Answer 1

添加一个标签看起来应该是作为一个函数而不是内联完成的，所以你可以这样写它

                                 // i is the last id
var addTab = (function (tab_root, nav_root, i) { // IIFE to create closure
    return function (title, contents) {
        var li, a, div, j;
        // get id
        j = ++i; // I put it in it's own var to avoid race conditions
        // create nav
        li = document.createElement('li');
        a = document.createElement('a');
        a.setAttribute('href', '#tabs-' + j);
        if (title) a.appendChild(document.createTextNode(title));
        li.appendChild(a);
        // create tab
        div =  document.createElement('div');
        if (contents) div.appendChild(document.createTextNode(contents));
        // append to document
        tab_root.appendChild(div);
        nav_root.appendChild(li);
        return {tab: div, nav: a, id: j};
    }
}(document.getElementById('tabs'), document.getElementById('ul_id'), 3)());
// invoke IIFE with initials i.e. id 3 for 3 tabs existing

现在

addTab('tab 4', 'tab 4 contents');

返回 Object ，其属性为 tab ， nav 和 id 。这使您可以根据需要对不同的部分进行更多的工作。

获取子节点的标签名称和ID

1 个答案: