Change H1 with H2 within a class with JavaScript

Question

I'm in no way a coder but I got an idea. I create websites with the tool webflow and when you set up a CMS collection with a rich-text-field the client can add headlines including h1, which I don't want them to. My idea is that with javascript replace every h1 with h2 within a class (so the page title doesn't get changed).

So far I manage to create this:

var e = document.getElementsByTagName('h1')[0];

var d = document.createElement('h2');
d.innerHTML = e.innerHTML;

e.parentNode.replaceChild(d, e);

<h1>Don't change this</h1>
<div class="the-class">
  <h1>Replace this with h2</h1>
</div>

Answer 1

You can use querySelector and use a proper CSS selector to match only <h1> elements inside .the-class:

for (let header of document.querySelectorAll('.the-class h1')) {
    // I gave these variables real names, very good practice
    var new_header = document.createElement('h2');
    new_header.innerHTML = header.innerHTML;

    header.parentNode.replaceChild(new_header, header);
}

<h1>Don't change this</h1>
<div class="the-class">
  <h1>Replace this with h2</h1>
</div>

This will replace all h1 elements anywhere inside .the-class

Answer 2

[edit 2023/04/18] Here is a utility function to change the name of any tag, whilst maintaining the properties of the original. It replaces the tagname part of outerHTML.

Note: the browser automagically replaces the end tag.

See also.

/* 
   Simplified alternative: a generic function 
   to change the tag name of an element by 
   changing its outerHTML.
   This conserves attributes/classNames of the
   original element
*/
const replaceElem = (elem, nwTag) => 
  elem.outerHTML = elem.outerHTML
    .replace(RegExp(`^<${elem.tagName}`, `i`), `<${nwTag}`);

document.querySelectorAll(`.the-class h1`)
   .forEach(h1 => replaceElem(h1, `h2`));
document.querySelectorAll(`div`)
  .forEach(div => replaceElem(div, `span`));

/* 
original snippet
-----------------
document.querySelectorAll(`.the-class h1`)
  .forEach(h1 => h1.replaceWith( Object.assign(
    document.createElement(`h2`), {
      innerHTML: h1.innerHTML,
      className: [...(h1.classList || [])].join(` `)
    } ) ) );
*/

body {
  font: normal 12px/15px verdana, arial, sans-serif;
}
h1 { color: red; }
h2.italic { font-style: italic; }
h2.blue { color: blue; }
h2[data-header] { background-color: #eee; }
span.the-class { display: block; }
span.the-class::after {
  content: 'Once I was <div> ';
  font-size: 1.2rem;
  margin-left: 2rem;
}

<h1>Don't change this</h1>
<div class="the-class">
  <h1>Replace this with h2</h1>
</div>
<div class="the-class">
  <h1 class="blue" data-header="2">Replace this with h2 too</h1>
</div>
<div class="the-class">
  <h1 class="italic blue">He! I want to be replaced too!</h1>
</div>

Answer 3

querySelectorAll to select the h1s inside of a class, createElement to make the new h2, and replaceWith to swap.

document.querySelectorAll('.the-class h1').forEach(h1 => { 
  const h2 = document.createElement('h2');
  h2.innerHTML = h1.innerHTML;
  h1.replaceWith(h2);
});

h1 {
  color: red;
}

h2 {
  color: blue;
}

<h1>Don't change this</h1>
<div class="the-class">
  <h1>Replace this with h2</h1>
</div>
<div class="the-class">
  <h1>And Replace this with h2</h1>
</div>