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-файле, но это тот, с которым я столкнулся. Я уверен, что существует некоторая форма синтаксической ошибки, но она не может ее найти.

P.S. Это мой первый опыт использования JS для динамического добавления элемента страницы без непосредственного изменения innerHTML.

Answer 1

Проблема заключается в том, что 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); 
} 

проверка this documentation понять больше о classLists

Answer 2

Здесь нет причин использовать .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); 
} 

Обратите внимание, что вы, вероятно, хотят работать на том, что иногда нужно больше, чем просто имя тега, идентификатор и класс. <input> элементов являются хорошим примером — они требуют атрибута «типа» (ну, на самом деле не требуют, но API, как это будет необходимо учитывать, что.)