Jquery Text to Link Script

jQuery Text to Link Script?

JQuery isn't going to help you a whole lot here as you're not really concerned with DOM traversal/manipulation (other than creating the anchor tag). If all your URLs were in <p class="url"> tags then perhaps.

A vanilla JavaScript solution is probably what you want, and as fate would have it, this guy should have you covered.

convert text to link by id jquery

Something like this:

var $el = $("#url"),
    url = $el.val();

$el.replaceWith( $("<a />").attr({"href":url,"target":"_blank"}).html(url) );

Place that in a document ready handler or in a script block at the end of the body.

You didn't say what you wanted the text of the link to be so I've just repeated the url as shown in this working demo: http://jsfiddle.net/khJx2/1/

Specifying the "target" attribute as "_blank" will open the link in a new page (or tab, depending on the browser). Remove that to have it open in place of the current page.

jquery change text of anchor link

If jQuery code doesn't work for unknown reason you could try with javascript.

function WatchTicket() {
    $.ajax({
        url: 'view-ticket?seq=<?php echo $_GET["seq"]; ?>&action=watch',
        dataType: 'jsonp',
        success: function(data){
            var link_node = document.getElementById('watchTicket');
            var txt = "Watch";
            link_node.innerHTML = link_node.innerHTML === txt ? 'Un-Watch' : txt;

        }
    });
}

If it doesn't work it's beacuse the Ajax request fails probably.

how to add text link inside a div using jquery?

Class and ID is not the same.

If ID try this:

$('#my-link').html('<a href="http://www.google.com">Google</a>');

Demo with ID

If Class try this:

$('.my-link').html('<a href="http://www.google.com">Google</a>');
   ^

Demo with class

jQuery: change link text and icon on click

$(document).ready(function() {
  $('#btn-collapse').on('click', function() {
    var thisElement = $(this);
    var anchorLabelElement = thisElement.find('label');
    if (anchorLabelElement.text() === "SECONDARY TEXT") {
      anchorLabelElement.text('PRIMARY TEXT');
      thisElement.find("i").text('expand_more');
    } else {
      anchorLabelElement.text('SECONDARY TEXT');
      thisElement.find("i").text("expand_less");
    }
  });
});

<link href="https://cdn.jsdelivr.net/npm/material-design-icons-iconfont@6.7.0/dist/material-design-icons.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#collapse" , class="btn" , role="button" , data-bs-toggle="collapse" id="btn-collapse">
  <i class="material-icons" style="vertical-align: middle;">expand_more</i>
  <label style="vertical-align: middle;">PRIMARY TEXT</label>
</a>

Linking JQuery into my html

<script type="text/javascript" src="<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" />
<script type="text/javascript" src="script.js"></script>

First, remove the extra src="<script inside your <script> tag. Also "close" it with a </script> tag...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

Second, place the script includes at the end of your <body> section, just before the </body> tag:

    ....
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</body>

OR, anywhere inside your <head> section:

    ....
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    ....
</head>

And finally, make sure the URL path is correct for your version:

http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

It's always smart to link to a full version. Otherwise, if the code at the URL is updated, your site could suddenly break without warning.

If you make the changes as indicated above and add a <title> element into your head section...

<head>
    <title>Title</title>
    ....

... your code will then pass HTML validation.

http://validator.w3.org/check

Jquery Text to Link Script