How can I write a script which help me to add H1 tag in between Div tag in html?

Question

I am working on Squarespace website. I am trying to add H1 tag automatically via script in Div tag. Below is the div tag in which I have text. I want to asign H1 tag to this text via script or any other method.

<div class="image-slide-title">
St. Stephens
</div>

The squarespace doesn't allow me to add H1 tag manually via coding. I can't use CSS code and when I use CSS code it changes the class and mess the area.

Answer 1

You could try to insert it in the DOM, like this:

const myDiv = document.getElementsByClassName('image-slide-title')[0];

let title = document.createElement('h1');
title.innerHTML = 'whatever you would like it to be';

myDiv.appendChild(title);

Answer 2

If in the div there is only a text:

$('.image-slide-title').html("<h1>" + $('.image-slide-title').text() + "</h1>");

Answer 3

Try the following code snippet,

 var container = document.querySelector('.image-slide-title'); var title = '<h1>'+container.innerHTML+'</h1>'; container.innerHTML = title;

 <div class="image-slide-title"> St. Stephens </div>