How to change tag name of all html elements which is selected by class name? dynamically

Question

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>

when copied

Where did you get stuck, what did you try? What went wrong with your attempt? What specific help do you need, where's your ("*[mcve]*") code? If you don't want `
` elements in your `
` elements why are they there? Where are they coming from? Can you change your back-end service or script that's generating this (invalid) HTML? (The HTML is invalid because a block-level element - such as a `
` - cannot be inside of a `
` element.) — David Thomas, Apr 30 '22 at 20:39
Assuming you have control of the HTML why not remove `
` altogether? — Andy, Apr 30 '22 at 20:43
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 I 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 — Vijaykrishna Abba, Apr 30 '22 at 21:11

Imran Rafiq Rather · Answer 1 · 2022-04-30T20:45:25.147

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;
}

edited Apr 30 '22 at 20:45

answered Apr 30 '22 at 20:39

Imran Rafiq Rather

7,677
1
16
35

Css is not working in the website do you have know how to change div to span of all elements which is selected by class name @ImranRafiqRather – Vijaykrishna Abba May 01 '22 at 10:05
Try using the same CSS in the `` element of your HTML File – Imran Rafiq Rather May 01 '22 at 17:30

score 0 · Accepted Answer · answered May 07 '22 at 12:02

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');

How to change tag name of all html elements which is selected by class name? dynamically

The desired output:

Present Output:

2 Answers2