如何从输入中获取值并将其添加到href jquery

Question

我想做一些像谷歌浏览器上的收藏夹窗口这样的想法是写一个hiperlink，然后链接出现在页面上。我正在使用jQuery，但不起作用

HTML：

<div id="Add" title="Add Link">
<form>
     <fieldset>
        <label for="dir">URL</label>
                  <input id="dir" type="url" class="text ui-widget-content ui-corner-all"/>
    </fieldset>
</form>

<div id="cuadro"></div>

$(function(){
  var a = $("#Add");
  a.dialog({
    autoOpen: false,
    height:350,
    width:250,
    modal: true,
    buttons: {
        "Accept": function(){ //Accept
            AddLink();
            $( this ).dialog( "close" );
        },
        "Reset": function(){//Reset
            dir.val(" ")
        },
        "Cancel": function() {//Cancel
            $( this ).dialog("close");
        }
    },
    close: function() {
        $( this ).dialog( "close" );
    }
  });
});

function AddLink(){
  var dir=$("#dir);
  var link=dir.val();
  alert(dir.val());
  $("#cuadro").append('<li><a href="link">link1</a></li>');
}

Answer 1

如果要将link变量用作href，则需要进行更改

$("#cuadro").append('<li><a href="link">link1</a></li>');

至

$("#cuadro").append('<li><a href="' + link + '">link1</a></li>');

Answer 2

演示场

我不确定“写一个hiererlink，然后该链接显示在页面上”的意思是什么，所以我将尽力而为，这就是您想要的：

1. 用户在输入框中输入URL。
2. 您在它下面的某个div中显示它。

HTML

<form>
    <fieldset>
        <label for="dir">URL</label>
        <input id="dir" type="url" class="text ui-widget-content ui-corner-all"/>
    </fieldset>
</form>

<p></p>

CSS

p {
    color: green;
    margin: 8px;
}

JavaScript的

$( "#dir" )
  .keyup(function() {
    var value = $( this ).val();
    $( "p" ).text( value );
  })
  .keyup();