javascript – ページ 2 – 今日という日は贈り物

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>

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>

</body></html>

※<span></span> の間に何も無いと表示されません。nodeValueが空っぽだと表示されません。。。
textの例のaTagオブジェクトに imgオブジェクトを生成して、追加するだけです。

タグ: javascript

tableのセルの位置をクリックして書き換える

IDが#alertTableのセルをクリックして内容を書き換える

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

span の text をlinkにする

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