Javascript将元素添加到DOM语法问题

Question

好吧，所以我进行了搜索，但找不到真正的答案。 我正在创建一个Javascript函数，可以轻松地将元素添加到指定的元素。 语法如下：

function add(element, to, idName, className) {
    //creates new element for DOM
    var newElement = document.createElement(element);
    //sets ID attribute for element
    var attrId = newElement.createAttribute('id');
    attrId.value = idName;
    //sets class attribute
    var attrClass = newElement.createAttribute('class');
    attrClass.value = className;
    document.getElementById(to).appendChild(newElement);
}

长话短说，这是行不通的。 是的，我的JS可以很好地链接到我的HTML，并且我已经在同一个JS文件中使用了许多其他功能，但这是我遇到的麻烦。 我确定存在某种形式的语法错误，但似乎找不到它。

PS这是我第一次使用JS动态添加页面元素，而无需直接更改innerHTML。

Answer 1

这里没有理由使用.createAttribute() 。 您正在创建这些属性，但是没有做任何将它们与正在创建的元素关联的操作。 事情要简单得多：

function add(element, to, idName, className) {
    //creates new element for DOM
    var newElement = document.createElement(element);
    //sets ID attribute for element
    newElement.id = id;
    //sets class attribute
    newElement.className = className;
    document.getElementById(to).appendChild(newElement);
}

请注意，您有时可能需要做的工作不仅是标签名称，id和类，还需要更多。 <input>元素是一个很好的例子—它们需要一个“ type”属性（嗯，不是真正需要的 ，但是这样的API需要解决这个问题。）

Answer 2

问题在于id和class已在每个元素中定义。 要访问元素的id ，只需执行element.id = id 。 至于类，有一个叫做element.classList的东西，如果您想添加一个类，只需键入element.classList.add("class_name") ，然后删除它，键入element.classList.remove("class_name") 。

现在正确的代码如下：

function add(element, to, idName, className) {
    //creates new element for DOM
    var newElement = document.createElement(element);
    //sets ID attribute for element
    newElement.id = idName;
    //sets class attribute
    newElement.classList.add(className);
    document.getElementById(to).appendChild(newElement);
}

查看此文档以了解有关classLists的更多信息