To replace a div element to the link

Question

I'm using below code for replacing links:

function replaceLink(href_array){
    $('.externalLink').each(function(index){
        $(this).replaceWith(function() {
            if ($(this).text() != "") {
                return $('<a />').append($(this).contents()).attr('href', href_array[index]);
            }
            else { // do not use
                return $('<a />').append(href_array[index]).attr('href', href_array[index]);
            }
        });
    });
};

The initial page has the following structure:

body 
    p div.externalLink /p
    p div.externalLink /p
    p div.externalLink /p
    p div.externalLink /p
    p div.externalLink /p
    p div.externalLink /p
/body

After the script, it should be:

body 
    p a#href /p
    p a#href /p
    p a#href /p
    p a#href /p
    p a#href /p
    p a#href /p
/body

But it turns out like this:

body 
    p /p a#href
    p /p a#href 
    p /p a#href
    p /p a#href
    p /p a#href
    p /p a#href
/body

How can I correct this?

at the bottom as it should be on top of how it turns out

Anurag Srivastava · Accepted Answer · 2022-07-11T07:53:17.787

2

You are creating div tags inside p tags, which is incorrect and the opening div tag will automatically close the p tag before it, hence the replaceWith works incorrectly.

Try a div inside div.

Source - Why can't the <p> tag contain a <div> tag inside it?

var href_array = [
  "Href1", "Href2", "Href3", "Href4", "Href5", "Href6"
]

function replaceLink(href_array) {
  $('.externalLink').each(function(index) {
    $(this).replaceWith(function() {
      if ($(this).text() != "") {
        return $('<a />').append($(this).contents()).attr('href', href_array[index]);
      } else { // do not use
        return $('<a />').append(href_array[index]).attr('href', href_array[index]);
      }
    });
  });
}

replaceLink(href_array)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="externalLink">A</div>
</div>
<div>
  <div class="externalLink">B</div>
</div>
<div>
  <div class="externalLink">C</div>
</div>
<div>
  <div class="externalLink">D</div>
</div>
<div>
  <div class="externalLink">E</div>
</div>
<div>
  <div class="externalLink">F</div>
</div>

edited Jul 11 '22 at 07:53

answered Mar 01 '19 at 13:21

Anurag Srivastava

14,077
4
33
43

yeap it is. but script change div to the link. p.s With div work – Костя Мельник Mar 01 '19 at 13:28
I'm sorry I did not understand that, did using the above approach solve your issue? – Anurag Srivastava Mar 01 '19 at 13:31
Can you check the code snippet and change it according to your needs? – Anurag Srivastava Mar 01 '19 at 13:37
yeah I did it when you said replace P with div. p.s Work – Костя Мельник Mar 01 '19 at 13:41

To replace a div element to the link

1 Answers1