How to change an element (e.g. h1 & # 8594; h2) using jQuery / plain old javascript?

Question

Of course, there are a number of possible errors related to the authenticity of the document, but my immediate stumbling block arises when changing paragraph ( p ) to the address element. My current method (more or less):

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

but it is not suitable for this particular case; It works great for p → blockquote or h2 → h3. Firebug suggests that for some reason a self-closing element ( <address/> ) was added to the document.

Can someone detect a bug or suggest an alternative method?

Answer 1

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

Your solution is subject to all kinds of terrible problems with HTML escaping and possibly injection attacks.

Answer 2

You can use the placeholder around the name:

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

Then use the JavaScript DOM to create new values ​​for the innerHTML property.

  <script type = "javascript">

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

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

 </script>