Изменить тип тега html неоткрытого элемента с помощью JavaScript

Question

Итак, у меня есть элемент, созданный другим процессом, созданный в методе, похожем на

var their_element = document.createElement("div");
/* Lots of stuff is done to their_element */

И этот объект передается мне позже. Он еще нигде не был добавлен. Проблема в том, что мне нужно, чтобы это был другой тип тега html, когда он, наконец, попадет в html, например:

<form></form>

Как мне это изменить? Решения, которые я нашел, включают редактирование после добавления, а не до.

Edit: Кроме того, выученное имя узла не может быть назначено для этого.

their_element.nodeName = "FORM"

не работает.

Кроме того, это также не работает:

their_element.tagName = "FORM"

Также это не сработало:

var outside = their_element.outerHTML;
outside = outside.replace(/div/g, 'form');
their_element.outerHTML = outside;

Все они все еще оставляют его как DIV при добавлении. (А я не ищу jQuery)

Answer 1

Проверьте это для кросс-браузерной совместимости, но есть элементы и методы для элементов, которые могут быть полезны.В частности, Element.attributes, Element.hasAttributes() и Element.setAttribute().Смотрите: https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes

Я не собираюсь использовать ES6 здесь, поэтому нам не нужно беспокоиться о транспиляции.Вы можете обновить, если хотите:

var el = document.createElement('div');
    el.id="random";
    el.style.background="red";
    el.style.width="200px";
    el.style.padding="10px";
    el.style.margin="10px";
    el.innerHTML="<input type='submit' value='submit'>";

console.log({"Element 1": el});

var newEl = document.createElement('form');

console.log({"Element 2 Before Transformation": newEl})

if (el.hasAttributes()) {
    var attr = el.attributes
    for (var i = 0; i < attr.length; i++) {
        var name = attr[i].name, val = attr[i].value;
        newEl.setAttribute(name, val)
    }
}

if (el.innerHTML) { newEl.innerHTML = el.innerHTML }

console.log({"Element 2 After Transformation": newEl})

document.body.append(el);
document.body.append(newEl); 

Существуют определенные свойства, которые необходимо учитывать, например innerHTML, innerText и textContent, которые будут перезаписывать друг друга, если установлены кратные значения.Возможно, вам также придется учитывать childNodes, а что нет.