'How to change tag name of all html elements which is selected by class name? dynamically
strong text
.my-p{
display: inline;
}
.my-div {}
.my-bold{
font-weight: 900;
}<!DOCTYPE html>
<html>
<head> </head>
<body>
<div>
<p class="my-p">This is <div class="my-div"><span class="my-bold">First</span></div> line</p>
<p class="my-p">This is <div class="my-div"><span class="my-bold">Second</span></div> line</p>
<p class="my-p">This is <div class="my-div"><span class="my-bold">third</span></div> line</p>
<p class="my-p">This is <div class="my-div"><span class="my-bold">Fourth</span></div> line</p>
<p class="my-p">This is <div class="my-div"><span class="my-bold">Fifth</span></div> line</p>
<p class="my-p">This is <div class="my-div"><span class="my-bold">six</span></span></div> line</p>
<p class="my-p">This is <div class="my-div"><span class="my-bold">seven</span></div> line</p>
</div>
</body>
</html>How can I select all <div> elements by class-name "my-div", and change the elements' tag-name to span.
I am trying to copy text form many pages from a website, it is has all these div in between p elements is making hard to copy in a readable manner when pasted it was pasting in multiple lines , where ever text is bold there is a div inside a div there is a span element and in that span element there is text and div has the same class name so I am looking for a method to select all div elements of same class name and change there tag name in to span
The desired output:
Present Output:
I was Tried to select the all div elements by using jQuery $$(.className) and it gives a list of all elements after that I Manual selected and changed the div to span and then it copied, same as how it appeared
but when I was using the CSS inline it did not worked property
sample website view
<body>
<p class="p-tag">
Lorem ipsum
<div class="div-tag">
<span class="span-tag">dolor</span>
</div>
sit amet consectetur adipisicing elit. Maxime
<div class="div-tag">
<span class="span-tag">mollitia</span>
</div>
,
</p>
<p class="p-tag" >
<b class="b-tag" >Lorem ipsum</b>
<div class="div-tag">
<span class="span-tag">sit amet consectetur adipisicing elit.</span>
</div>
</p>
</body>
Solution 1:[1]
I found the Answer form here
jQuery/javascript replace tag type
First I used this to add scrip in head tag or you can add script manually
const link = document.createElement('script');
link.setAttribute("src", "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js");
const newHead = document.getElementsByTagName('head')[0];
newHead.insertBefore(link, newHead.firstChild);
or add manually in head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
then
(function($) {
$.fn.replaceTagName = function(replaceWith) {
var tags = [],
i = this.length;
while (i--) {
var newElement = document.createElement(replaceWith),
thisi = this[i],
thisia = thisi.attributes;
for (var a = thisia.length - 1; a >= 0; a--) {
var attrib = thisia[a];
newElement.setAttribute(attrib.name, attrib.value);
};
newElement.innerHTML = thisi.innerHTML;
$(thisi).after(newElement).remove();
tags[i] = newElement;
}
return $(tags);
};
})(window.jQuery);
Then
$('.my-div').replaceTagName('span');
Solution 2:[2]
We can use display:inline; or display:inline-block; on any block level element to make it appear on one line.
As per your desired output: You can simply use the following CSS:
.my-div,
.my-p {
display:inline;
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Vijaykrishna Abba |
| Solution 2 |