2009年05月21日

javascriptでタグ生成手順の覚書

超今更ですが、javascriptでタグ生成手順の覚書。

◆実行結果


 →に作成されます:

◆独自リンク作成

 リンク文字列:

 リンク先URL:

 

↓に作成されていきます。

◆ソース

<html>
<head>
<title>javascriptタグ生成</title>
<script type="text/javascript">
//リンク作成
function createLink(strTag,strLink,strURL)
{
//<a>タグ作成
var a = document.createElement('a');

//<a>ヤホー!</a>
a.appendChild(document.createTextNode(strLink));

//<a href="http://www.yahoo.co.jp/">
a.href = strURL;

//<a target="blank">
a.target = 'blank';

//<body>タグに追加(最後尾に追加される)
document.getElementById(strTag).appendChild(a);
}

//動的リンク作成
function createOriginalLink()
{
createLink('your_a',document.your_form.str.value,document.your_form.url.value);
document.getElementById('your_a').appendChild(document.createElement('br'));
}
</script>
</head>

<body>
<input id="yahoo_btn" type="button" value="ヤホーリンク作成" onclick="createLink('yahoo_a','ヤホー!','http://www.yahoo.co.jp/');">
<div id="yahoo_a"> →に作成されます:</div>
◆独自リンク作成
<form name="your_form" action="#">
 リンク文字列:<input name="str" type="textarea"><br>
 リンク先URL:<input name="url" type="textarea"><br>
 <input type="button" value="作成" onclick="createOriginalLink()">
</form>
↓に作成されていきます。
<div id="your_a"></div>
</body>
</html>

 要点は、
 ・タグの生成
 

//<a>タグ作成
var a = document.createElement('a');
 

 ・テキストノードを追加

//<a>ヤホー!</a>
a.appendChild(document.createTextNode(strLink));

 ・プロパティの設定

//<a href="http://www.yahoo.co.jp/">
a.href = strURL;
//<a target="blank">
a.target = 'blank';

 ・指定タグ内に、aタグを追加

//<body>タグに追加(最後尾に追加される)
document.getElementById(strTag).appendChild(a);

 という所でしょうか。


posted by purigen at 02:08| Comment(0) | TrackBack(0) | javascript | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。