アンカータグのJavascript動的生成が機能していません

Question

JavaScriptでhtmlを作成しようとしています。アンカータグへのリンクが期待通りに機能していません。

var test ="http://blogs.edweek.org/edweek/finding_common_ground/2016/10/if_coaching_is_so_powerful_why_are't_principals_being_coached.html?cmp=SOC-EDIT-FB"; 

    var res ="<a style='color:#7Bc76B;text-decoration: none;' target='_blank' href='"+test+"'>Link to read more ></a>"; 

    document.getElementById("res").innerHTML = res; 

https://jsfiddle.net/b4kqsn6u/

すべてのヘルプは理解されるであろう。

おかげ

Answer 1

あなたは、単にあなたの<a>宣言を変更することができます：あなたは（encodeURIは、単一引用符をコードしない）％27で単一引用符を置き換えることによって、あなたのURLをいずれかの事前URLENCODEまたは手動でそれを行うことを確認してくださいあなたのURLに存在する：

var res ='<a style="color:#7Bc76B;text-decoration: none;" target="_blank" href="'+test+'">Link to read more ></a>'; 

は、上記のように単一引用符内で宣言し、すべての属性を二重引用符内にある

https://jsfiddle.net/b4kqsn6u/3/

Answer 2

あなたはそこに属していない、あなたのURLで単一引用符（ '）を持っています。単一引用符の世話をするために、次のように

は

var test ="http://blogs.edweek.org/edweek/finding_common_ground/2016/10/if_coaching_is_so_powerful_why_aren't_principals_being_coached.html?cmp=SOC-EDIT-FB"; 

test = test.replace(/'/g, "%27"); 

var res ="<a style='color:#7Bc76B;text-decoration: none;' target='_blank' href='"+test+"'>Link to read more ></a>"; 

document.getElementById("res").innerHTML = res; 

Answer 3

私は通常、単一引用符は、デバッグのヘルプ（「なぜこのコードは動作していないを求めて

var test ="http://blogs.edweek.org/edweek/finding_common_ground/2016/10/if_coaching_is_so_powerful_why_are't_principals_being_coached.html?cmp=SOC-EDIT-FB"; 
 

 
var res ='<a style="color:#7Bc76B;text-decoration: none;" target="_blank" href="'+test+'">Link to read more ></a>'; 
 

 
document.getElementById("res").innerHTML = res;

<div id="res"> 
 

 
</div>