How to replace multiple HTML elements into another type of element which is in a regular string form

I have this HTML:

<div>
    <span class="content">Content 1</span>
    <div>Hello</div>
    <span class="content">Content 2</span>
    <b>
        <span class="content">Content 3</span>
    </b>
    <div class="content">Hello</div>
</div>

I need to be able to get all elements with class “content” and then replace them with another element which is currently in a string form.

So its,

var stringHtml = "<input type='text' />";

This stringHtml should replace all the class=”content” and be rendered as a regular input element in place of all the class=”content” elements.

Answer

This is basically it:

var stringHtml = "<input type='text' />";

document.querySelectorAll('.content').forEach(elm => {
  elm.outerHTML = stringHtml;
});
<div>
  <span class="content">Content 1</span>
  <div>Hello</div>
  <span class="content">Content 2</span>
  <b><span class="content">Content 3</span></b>
  <div class="content">Hello</div>
</div>

But you probably need a name for each of the input elements, so I will suggest this:

document.querySelectorAll('.content').forEach(elm => {
  var name = elm.attributes['name'].value;
  elm.outerHTML = `<input type="text" name="${name}" />`;
});
<div>
  <span class="content" name="input1">Content 1</span>
  <div>Hello</div>
  <span class="content" name="input2">Content 2</span>
  <b><span class="content" name="input3">Content 3</span></b>
  <div class="content" name="input4">Hello</div>
</div>