To replace a div element to the link

Question

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

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 that make?

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

Anurag Srivastava · Accepted Answer · 2019-03-01T13:37:35.597

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 <p> tag can't contain <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>
<html>

<body>
  <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>
</body>

</html>

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

To replace a div element to the link

1 Answers1