使用 jQuery 创建链接

Question

我有这段代码，我正在解析一个 URL 以将路径传递给另一个 URL，两者都在同一个域中。我已成功解析它并创建了一个新 URL，但现在我无法将其转换为链接。这就是我所拥有的：

$(document).ready(function() {
  var URL = 'https://www.site-name.com/f1'; // MAIN URL

  var otherURL = 'https://www.site-name.com/Manual/module_1_4_2.htm'; // Other URL

  //Create a new link with the url as its href:
  var a = $('<a>', {
    href: otherURL
  });
  var sResult = '<b>Protocol:</b> ' + a.prop('protocol') + '<br/>' + '<b>Host name: </b>' + a.prop('hostname') + '<br/>' + '<b>Path: </b>' + a.prop('pathname') + '<br/>'

  var path = a.prop('pathname'); // pass the path to the MAIN URL 
  var newURL = URL + "?page=" + path.substring(path.lastIndexOf('/') + 1);

  // display new URL 
  $('span').html(sResult + "<br><b>New URL: </b>" + newURL);

  // Correctly displays New URL:https://www.site-name.com/f1? page=module_1_4_2.htm

  // How do I turn it into a link ?

});

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

Answer 1

新建一个''元素，设置链接的url和文本，然后在NEW URL:后面直接追加

$(document).ready(function() {
  var URL = 'https://www.site-name.com/f1'; // MAIN URL

  var otherURL = 'https://www.site-name.com/Manual/module_1_4_2.htm'; // Other URL

  //Create a new link with the url as its href:
  var a = $('<a>', {
    href: otherURL
  });
  var sResult = '<b>Protocol:</b> ' + a.prop('protocol') + '<br/>' + '<b>Host name: </b>' + a.prop('hostname') + '<br/>' + '<b>Path: </b>' + a.prop('pathname') + '<br/>'

  var path = a.prop('pathname'); // pass the path to the MAIN URL 
  var newURL = URL + "?page=" + path.substring(path.lastIndexOf('/') + 1);

  // display new URL
  var newLink = $('<a>',{
    href: newURL,
    text: newURL
  })
  $('span').html(sResult + "<br><b>New URL: </b>").append(newLink);
});

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

Answer 2

与您创建 a 的方式相同。

$(document).ready(function() {
  var URL = 'https://www.site-name.com/f1'; // MAIN URL

  var otherURL = 'https://www.site-name.com/Manual/module_1_4_2.htm'; // Other URL

  //Create a new link with the url as its href:
  var a = $('<a>', {
    href: otherURL
  });
  var sResult = '<b>Protocol:</b> ' + a.prop('protocol') + '<br/>' + '<b>Host name: </b>' + a.prop('hostname') + '<br/>' + '<b>Path: </b>' + a.prop('pathname') + '<br/>'

  var path = a.prop('pathname'); // pass the path to the MAIN URL 
  var newURL = URL + "?page=" + path.substring(path.lastIndexOf('/') + 1);

  // display new URL 
  $('span').html(sResult + "<br><b>New URL: </b>" + newURL);

  // Correctly displays New URL:https://www.site-name.com/f1? page=module_1_4_2.htm

  // How do I turn it into a link ?

  var new_a = $('<a>', {
    href: newURL,
    text: 'Click here for new URL'
  });
  $('div').append(new_a);

});

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