Replace h1 tag with span (js loop)-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

This is a very short one (proven):

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

CodePudding user response：

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>

CodePudding user response：

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>