使用 javascript 将 class 和 id 属性添加到 HTML 标签答案

【问题标题】：Add class and id attributes to HTML tags using javascript使用 javascript 将 class 和 id 属性添加到 HTML 标签
【发布时间】：2014-01-15 02:00:20
【问题描述】：

我编写了以下代码来检索要显示的 xml 数据，但我想创建一个选项卡来将这些 xml 数据存储在其中，但我不知道如何将 class 和 id 属性添加到 HTML 标签中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>");

【问题讨论】：

你要对哪个元素执行此操作
这里有多个问题...nav 元素未关闭...li 不在ul 或ol 等内
document.write 通常不是编写面向人的内容的好选择（特别是因为您在那里编写的所有内容都可能只是 HTML）。你能提供一个你想要什么输出的例子吗？
我不太擅长这个，但我的输出是显示两个标签，称为人类和机器，标签内容在 html 中是这样的。
jsfiddle.net/geKFy/38

标签： javascript html xml class tags

【解决方案1】：

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

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

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

    <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 ') );
    }

【讨论】：

您可以简单地使用$('<div />')，而不是$( document.createElement('div') )。
我已经看到了这两种方法，我不确定是否比另一种方法有好处，但是我读到的信息说你会从 "$( document.createElement( 'div') )" 作为另一种方法基本上是相同的东西，在它上面有一个抽象层。虽然我也没有基准测试

【解决方案2】：

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

在您创建 HTML 的地方，您可以将您的 id, class 放在那里。

这是一个例子：

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/

【讨论】：