Using Javascript to select div leads to page not f

Question

I managed to get help on another thread for changing the title and link of an element using JavaScript (Issue with changing the title of a link using jQuery).

I have tried implementing the technique there to another element on my website but am instead met with an error Error 404: The page your are looking for cannot be found.

Thus, while this code works in isolation:

var href = jQuery('#_tab_1 > div > div > div:nth-child(3) > div > div.pf-body > ul > li:nth-last-child(1) > p.item-property').html();
var link = "<a href='"+href+"' target='_blank'>Click Here</a>";
jQuery('#_tab_1 > div > div > div:nth-child(3) > div > div.pf-body > ul > li:nth-last-child(1) > p.item-property').replaceWith(link);

The following code leads to the error mentioned above.

var href = jQuery('#_tab_1 > div > div > div:nth-child(3) > div > div.pf-body > ul > li:nth-last-child(1) > p.item-property').html();
var link = "<a href='"+href+"' target='_blank'>Click Here</a>";
jQuery('#_tab_1 > div > div > div:nth-child(3) > div > div.pf-body > ul > li:nth-last-child(1) > p.item-property').replaceWith(link);

var href2 = jQuery('#c27-single-listing > section > div.profile-cover-content.reveal.reveal_visible > div > div > ul > li:nth-child(3) > div').html();
var link2 = "<a href='"+href2+"' target='_blank'>Click Here</a>";
jQuery('#c27-single-listing > section > div.profile-cover-content.reveal.reveal_visible > div > div > ul > li:nth-child(3) > div').replaceWith(link2);

Attached is the link to the html code I am targeting (Link). Note that the link only reflects the html related to the javascript code that I can't get working ie. href2. I had not posted the segment that href was targeting as it might get too messy. My purpose is to replace www.hotmail.com with the words Click Here, but the user should be able to select Click Here and it would direct them to www.hotmail.com. Also, because I had to select only the relevant portions of the html, the selector you view in the link would be different from what is stated in my code above.

Thank you for your help.

Answer 1

Use :eq() Selector to select the 4th li and then replace its content:

HTML:

 <div id="buttons medium button-outlined">https://www.hotmail.com</div>

JQuery:

var href2 = $('.container li:eq(3) > .buttons').html();
var link2 = "<a href='"+href2+"' target='_blank'>Click Here</a>";
$('.container li:eq(3) > .buttons').replaceWith(link2);

Working Demo here

Answer 2

Here's a snippet that does what you want. Notice that you can use either a class (for multiple elements) or an id (for a singular element).

Basically, I used several commands to do what you wanted:

• each() - should do the following function for each element found by the selector. this will refer to the DOM element
• text() - return the text (without html) for that item
• replaceWith() - will replace the element with whatever you want

in this example, every item with the class should-become-link will become a link after 2 seconds (because of the setTimeout). The original text inside the element will be used as the new href value.

$(document).ready(function() {
  setTimeout(function() {
    var element = $('.should-become-link');
    element.each(function(index) {
      var $this = $(this);
      var currentText = $this.text();

      $this.replaceWith(
        `<a href="${currentText}" target="_blank">Click Here</a>`
      );
    });
  }, 2000);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="buttons medium button-outlined should-become-link">
  https://www.hotmail.com
</div>

<div><a href="http://www.google.com" target="_blank">shouldn't change!</a></div>
<div><a href="//www.google.com" target="_blank">shouldn't change!</a></div>
<div><a href="//www.google.com" target="_blank">shouldn't change!</a></div>
<div><a href="//www.google.com" target="_blank">shouldn't change!</a></div>
<div><a href="//www.google.com" target="_blank">shouldn't change!</a></div>

<div class="buttons medium button-outlined should-become-link">
  https://www.google.com
</div>

and here's a codepen