ユーザー入力からHTMLタグ出力

Question

いいえ私が試しているものの例。

ユーザ入力：

私はJavaScriptでこれを行うことができますどのように

<script> 
 
$(document).ready(function() { 
 
    // Handler for .ready() called. 
 

 
    $("#change-it").click(function() { 
 
    var userLink = $('#usr-input').val().replace(/.*?:\/\//g, ""); 
 
    $('#users-text').text('<a href="' + userLink + '" ><img src="rainbow.gif"></a>'); 
 
    $('#user-link').attr('href', 'http://' + userLink); 
 
    }); 
 

 
}); 
 
</script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<input type="text" class="form-control" id="usr-input"> 
 
<br> 
 
<button id="change-it" type="button">Update Text</button> 
 
<br> 
 
<div id="users-text"></div> 
 
<br> 
 
<a id="user-link" href="#" target="_blank"> 
 
    <img src="http://orig09.deviantart.net/8364/f/2014/053/f/9/free_space_galaxy_texture_by_lyshastra-d77gofi.png" /> 
 
</a>

：http://google.com

私は出力になりたいですか？

よろしくお願いいたします。

Answer 1

このように、ユーザーの入力を以下のようにリンク上のhrefとして設定しますか？

$(document).ready(function() { 
 
    // Handler for .ready() called. 
 

 
    $("#change-it").click(function() { 
 
    var userLink = $('#usr-input').val().replace(/.*?:\/\//g, ""); 
 
    $('#users-text').text('<a href="' + userLink + '" ><img src="rainbow.gif"></a>'); 
 
    $('#user-link').attr('href', 'http://' + userLink); 
 
    }); 
 

 

 
});

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

 
<input type="text" class="form-control" id="usr-input"> 
 
<br> 
 
<button id="change-it" type="button">Update Text</button> 
 
<br> 
 
<div id="users-text"></div> 
 
<br> 
 
<a id="user-link" href="#" target="_blank"> 
 
    <img src="http://orig09.deviantart.net/8364/f/2014/053/f/9/free_space_galaxy_texture_by_lyshastra-d77gofi.png" /> 
 
</a>

Answer 2

まず取得することにより、すなわち、要素はIDです： のvar要素=のdocument.getElementById（ "要素のid"）

その後のhrefプロパティを変更します。 element.href = "あなたの文字列"