span の text をlinkにする
- linkにする要素のidを設定します
- link先のURLを設定します
- spanのDOMオプジェクトを取得します
- spanのtext部分を取得します
- aタグのエレメントオプジェクとをaTagとして生成します
- aTagオブジェクトにhref要素を追加します
- aTagオブジェクトにtarget要素を追加します
- aTagのドキュメントに取得したlinkのテキストを追加します
- spanをaに置き換えます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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> |
span に image を付加して link にする
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |
※<span></span> の間に何も無いと表示されません。nodeValueが空っぽだと表示されません。。。
textの例のaTagオブジェクトに imgオブジェクトを生成して、追加するだけです。