Как изменить элемент (например, h1 -> h2), используя jQuery / обычный старый javascript?

Question

Конечно, существует целый ряд возможных ошибок, связанных с достоверностью документа, но мой непосредственный камень преткновения возникает при изменении абзаца (p) на элемент address. Мой текущий метод (более или менее):

var p = $('p#test');
p.replaceWith('<address>' + p.html() + '</address>');

но это не так для данного конкретного случая; это прекрасно работает для p -> blockquote или h2 -> h3. Firebug предполагает, что по какой-то причине в документ был добавлен самозакрывающийся элемент (<address/>).

Кто-нибудь может обнаружить ошибку или предложить альтернативный метод?

Answer 1

var p = $('p#test');
var a = $('<address></address>').
    append(p.contents());
p.replaceWith(a);

Ваше решение подвержено всевозможным ужасным проблемам с выходом из HTML и, возможно, атакам с использованием инъекций.

Answer 2

Вы можете использовать заполнитель вокруг заголовка:

<span id="demo"><h1>Title</h1></span>

Затем используйте JavaScript DOM для создания новых значений для свойства innerHTML.

<script type="javascript">

setTitle = function(id, tag, title) {
  var container = document.getElementById(id);
  container.innerHTML = '<' + tag + '>' + title + '</' + tag + '>';
}

setTitle('demo', 'h1', 'My Title');

</script>