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
This is a very short one (proven):
$('h1').each(function(){
$(this).replaceWith($('<p>' + this.innerHTML + '</p>'));
});
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>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>