Replace h1 tag with span (js loop)

Question

I have several elements with the tag and I want to change all of them to a tag. so I go like this:

document.getElementsByTagName("h1")[0].setAttribute("id", "author-name");

var elem=document.getElementById("author-name");
var parent=elem.parentNode;
var newElement=document.createElement("span");

newElement.textContent=elem.textContent;
newElement.id=elem.id;
parent.replaceChild(newElement, elem);

var replacementTag = 'span';

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Text txt</h1>
  <h1>Text txt</h1>
  <h1>Text txt</h1>
</body>
</html>

I select the Tag give it a ID and based on the ID I replace the whole tag. But its runing only once. How to change the code so I can run it through all availeble tags?

I tryed to do something like that but this didnt work:

var replacementTag = 'span';
//start loop
$('h1').each(function() {
var outer = this.outerHTML;
// Replace tag open
var regex = new RegExp('<' + this.tagName, 'i');
var newTag = outer.replace(regex, '<' + replacementTag);
// Replace tag close
regex = new RegExp('</' + this.tagName, 'i');
newTag = newTag.replace(regex, '</' + replacementTag);
$(this).replaceWith(newTag);
});

Can someone helpt me out? If possible please show the solution inside a snippet

ty

Does this answer your question? [Using jQuery to replace one tag with another](https://stackoverflow.com/questions/7093417/using-jquery-to-replace-one-tag-with-another) — Kevin, Dec 15 '21 at 12:24

score 1 · Answer 1 · answered Dec 15 '21 at 12:43

1

This is a very short one (proven):

$('h1').each(function(){
    $(this).replaceWith($('<p>' + this.innerHTML + '</p>'));
});

answered Dec 15 '21 at 12:43

William Schoeman

23
7

Might wanna mention, that this code relies on the use of jQuery. so an extra 31kB of code for a simple replacement. – Anuga Dec 15 '21 at 12:52

score 1 · Accepted Answer · answered Dec 15 '21 at 12:49

If you disregard potential attributes, you can just simple replace them, and contain the correct content, by using .innerHTML instead of .textContent.

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

PS: No need to use jQuery...

const elements = document.querySelectorAll('h1');

elements.forEach(h1 => {
    const span = document.createElement('span');
    span.innerHTML = h1.innerHTML;
    h1.replaceWith(span);
});

<h1>must be replaced</h1>
<h1>must be replaced</h1>
<h1>must be replaced</h1>
<h1>must be replaced</h1>
<h1>must be replaced</h1>

that seems ok, since I just want to replace this elements in wp-template that dosend allow me to do that — J.Hillton, Dec 16 '21 at 15:40

score 0 · Answer 3 · edited Dec 15 '21 at 12:51

0

With jQuery try this ..

$(document).ready(function(){
  $("button").click(function(){
    $("h1").each(function( index  ){
 
 value = $(this).val()
 
 $(this).unwrap().wrap('<pre/>');
 $(this).attr("id",index+1);
 
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<button>Alert the value of each list item</button>

 <h1>Text txt</h1>
  <h1>Text txt</h1>
  <h1>Text txt</h1>

</body>
</html>

edited Dec 15 '21 at 12:51

Anuga

2,619
1
18
27

answered Dec 15 '21 at 12:35

ribosed

128
1
11

var replacementTag = 'span'; //start loop $('h4').each(function() { var outer = this.outerHTML; // Replace tag open var regex = new RegExp('<' + this.tagName, 'i'); var newTag = outer.replace(regex, '<' + replacementTag); // Replace tag close regex = new RegExp('' + this.tagName, 'i'); newTag = newTag.replace(regex, '' + replacementTag); $(this).replaceWith(newTag); }); this is how I used it for now. it needs jq to work, but thank you for you post – J.Hillton Dec 16 '21 at 15:43

score 0 · Answer 4 · answered Dec 15 '21 at 12:38

You could use getElementsByTagName, and then replace using replaceWith.

https://developer.mozilla.org/en-US/docs/Web/API/document/getElementsByTagName

https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceWith

const div = document.getElementById('my-div');

const list = div.getElementsByTagName('h1');

Array.from(list).forEach(h1 => {
    const span = document.createElement('span');
    span.textContent = 'this is a replacement example';
    span.style.display = 'block'; // just to break line
    h1.replaceWith(span);
});

<div id="my-div">
  <h1>must be replaced</h1>
  <h1>must be replaced</h1>
  <h1>must be replaced</h1>
  <h1>must be replaced</h1>
  <h1>must be replaced</h1>
</div>

I think the OP just wants to change the tag name – Ruan Mendes Dec 15 '21 at 14:11 — Ruan Mendes, Dec 15 '21 at 14:11

Replace h1 tag with span (js loop)

4 Answers4