Question

我编写了以下代码来检索要显示的xml数据，但是我想创建一个选项卡来存储这些xml数据，但我不知道如何使用HTML标签添加class和id属性的JavaScript。

我想出的是一个简单的代码，如下所示。

document.write("<div></div>");
        document.write("<h1><strong>Resources List</strong></h1>");
        document.write("<nav>");

        document.write("<ul>");
        document.write("</ul>");
        document.write("<li ><a href=#tabs-1>Humans</a></li>");
        document.write("<li ><a href=#tabs-2>Machines</a></li>");
        document.write("</ul>");

Answer 1

这有几个问题，显然没有足够的信息来提供可靠的答案，但是为了帮助我，让我从这里开始。

我建议使用jQuery，虽然我不相信它总是正确的答案，但是在经常操作DOM时它是。

我不确定导航标签是什么，但是假设您想要这样的结构。

    <div>
        <h1><strong>Resources List</strong></h1>
        <ul>
            <li ><a href=#tabs-1>Humans</a></li>
            <li ><a href=#tabs-2>Machines</a></li>
        </ul>
    </div>

我见过的最有效/最有效的方法，并且使用了很多！是

    function (){ // wrapper function, whatever is starting everything
        var $div        = $( document.createElement('div') ),
            $h1         = $( document.createElement('h1') ),
            $ul         = $( document.createElement('div') ),
            $humanLi    = $( document.createElement('li') ),
            $humanA     = $( document.createElement('a') ),
            $machineLi  = $( document.createElement('li') ),
            $machineA   = $( document.createElement('a') ),
            // while this looks like overkill the research i have done suggests this to be the most efficient means of generating DOM elements
            // it also affords you great manipulation ability

            $machineA.attr('href', '#tab1').html('2').click( function(e) {
                // i realize this wasn't in the code you provided but i thought i would demonstrate
                e.preventDefault(); // avoid changing the url on click
            }).appendTo( $machineLi );

            $humanA.attr('href', '#tab1').html('1').click( function(e) {
                // i realize this wasn't in the code you provided but i thought i would demonstrate
                e.preventDefault(); // avoid changing the url on click
            }).appendTo( $humanLi );

            $humanLi.appendTo( $ul );
            $machineLi.appendTo( $ul );

            $h1.appendTo( $div );
            $ul.appendTo( $div );

            $div.addClass( 'new-class' /* this is how you add a class */ ).attr('id', 'new-ID' /* this is how you set an id */ );

            // at this point you inject your structure wherever you want it
            $div.appendTo('body');
            // or
            $div.appendTo(document);
            // or
            $div.appendTo( $(' some selector #content or .main whatever ') );
    }

Answer 2

你应该首先创建一个片段或HTML字符串，然后你应该将它附加到任何元素，而不是继续创建元素并再次将它放在某个地方。

在创建HTML的位置，您可以将您的ID，类放在那里。

这是一个例子：

var html = "<div>";
html += "<h1><strong>Resources List</strong></h1>";
html += "<nav>";
html += "<ul>";
html += "<li id='tab1' class='tabs'><a href='#tabs-1'>Humans</a></li>";
html += "<li id='tab2' class='tabs'><a href='#tabs-2'>Machines</a></li>";
html += "</ul>";
html += "</nav>";
html += "</div>";

document.body.innerHTML = html;

jsfiddle：http://jsfiddle.net/ashishanexpert/7h9Zk/1/

使用javascript将类和id属性添加到HTML标记

2 个答案: