javascriptでDOMを操作してspanをlinkにする方法

span の text をlinkにする

linkにする要素のidを設定します
link先のURLを設定します
spanのDOMオプジェクトを取得します
spanのtext部分を取得します
aタグのエレメントオプジェクとをaTagとして生成します
aTagオブジェクトにhref要素を追加します
aTagオブジェクトにtarget要素を追加します
aTagのドキュメントに取得したlinkのテキストを追加します
spanをaに置き換えます

<html><body>
<script>
window.onload = function(){
  var id = "test";
  var url = "http://yosshi.snowdrop.asia/";
  var baseTag = document.getElementById(id);
  var link = baseTag.firstChild.nodeValue;
  var aTag = document.createElement("a");
  aTag.href = url;
  aTag.target = "_blank";
  aTag.appendChild(document.createTextNode(link));
  baseTag.replaceChild(aTag, baseTag.firstChild);
}
</script>
<span id="test">test</span>
</body></html>

window.onload = function(){

var id = "test";

var url = "http://yosshi.snowdrop.asia/";

var baseTag = document.getElementById(id);

var link = baseTag.firstChild.nodeValue;

var aTag = document.createElement("a");

aTag.href = url;

aTag.target = "_blank";

aTag.appendChild(document.createTextNode(link));

baseTag.replaceChild(aTag, baseTag.firstChild);

}

</script>

</body></html>

span に image を付加して link にする

<html><body>
<script>
window.onload = function(){
  var id = "test";
  var url = "http://yosshi.snowdrop.asia/";
  var baseTag = document.getElementById(id);
  var aTag = document.createElement("a");
  aTag.href = url;
  aTag.target = "_blank";
  var DOM_img = document.createElement("img");
  DOM_img.src = "http://snowdrop.asia/wp-content/uploads/2015/09/frontend-300x142.png";
  aTag.appendChild(DOM_img);
  baseTag.replaceChild(aTag, baseTag.firstChild);
}
</script>
<span id="test">test</span>
</body></html>