使用 innerHTML 创建表头

Posted 2023-05-07

【中文标题】使用 innerHTML 创建表头

【英文标题】：Create Table Header with innerHTML

【发布时间】：2018-07-17 22:15:10

【问题描述】：

我想使用“headerClass”类的元素创建表的标题，但之前使用 javascript 函数删除了重复项。 我的 JavaScript 函数：

function getHeaderElements() 

var headerElements = document.getElementsByClassName("headerElement");
var output = document.getElementById("output");

var uniqueHeaderElements = [];
$.each(headerElements, function(i, el)
    if($.inArray(el, uniqueHeaderElements) === -1) uniqueHeaderElements.push(el);
);

output.innerhtml =  uniqueHeaderElements.toString() ;

但是，我不确定应该如何遍历数组的元素并将它们添加到 innerHTML，类似于下面的代码：

output.innerHTML =  uniqueHeaderElements.toString() ;

任何帮助将不胜感激！

【问题讨论】：

为什么要混合香草和 jquery？

@RonvanderHeijden Vanilla 让 jQuery 的味道更好。 ;)

而不仅仅是uniqueHeaderElements.push(el);，你也可以做output.appendChild(el);，这样你只会将你的数组中没有的元素添加到dom中，你不需要再次交互通过你独特的数组。

您的数组uniqueHeaderElements 将只包含一个元素，对吗？如果是这样，请尝试：output.innerHTML = uniqueHeaderElements[0].toString() ;

【参考方案1】：

您需要执行与之前相同的循环，将所有元素添加到 innerHTML 中。

试试这个：

$.each(uniqueHeaderElements, function(i, el)
      output.innerHTML += el;
 );

不过，我不知道您的表 uniqueHeaderElements 中的内容。您可能需要稍微修改一下这段代码。