blockquote要素の属性を抜き出し表示するjavascript-その2

先日エントリーしたblockquote要素の属性を抜き出し表示するjavascript

引用元のタイトル名にそのままリンクを貼ることは可能なのでしょうか?
コメント-blockquote要素の属性を抜き出し表示するjavascript

上記のコメントを頂きましたので、簡単に置き換える方法を紹介しようと思いましたが、アンカーリンクの前に「引用元:」のテキストを表示しようと思い、予想外に時間がかかってしまいました。

今回は、
引用元:引用元タイトルリンク
のパターンで抜き出し表示するjavascriptを紹介します。


blockquote要素の属性を抜き出し表示するjavascript-パターン1

引用元:引用元タイトルリンク
のパターンで抜き出し表示するコードです。

サンプルページはこちらblockquote要素の属性を抜き出し表示するjavascriptパターン1

blockquote要素の属性を抜き出し表示するjavascript-パターン2

引用元:引用元ページタイトル名
引用元URL
のパターンで抜き出し表示するコードです。

サンプルページはこちらblockquote要素の属性を抜き出し表示するjavascriptパターン2

blockquote要素の属性を抜き出し表示するjavascript-パターン3

もっとシンプルに
引用元
のパターンで抜き出し表示するコードです。

上記のコードの12行目

a.appendChild(document.createTextNode('引用元'));

の部分を

a.appendChild(document.createTextNode(title));

に書き換えれば、 引用元ページタイトルのアンカーリンク表示となります。

javascriptメモ

今回のスクリプトで”文字列”をobject(オブジェクト)として、DOMツリー操作を使ったメソッドで流し込むにはdocument.createTextNode()を使えばいい。

element.appendChild(a);は、複行指定できる。

新しく生成する要素に、それぞれ異なったobject(オブジェクト)を同じ行内に流し込む時には、element.appendChild(a);を複数指定することで可能となります。

上記のことを把握するのに時間がかかりました。

参考サイト

DOM Samples /Core Node/appendChild() - [JavaScript]All About
http://allabout.co.jp/internet/javascript/closeup/CU20040815A/

トラックバック(0)

このブログ記事を参照しているブログ一覧: blockquote要素の属性を抜き出し表示するjavascript-その2

このブログ記事に対するトラックバックURL: http://weblibrary.s224.xrea.com/x/mt/mt-tb.cgi/218

コメントする

アイテム

  • ff-logo-big

    ff-logo-big: firefoxロゴ

  • fmtube_image

    fmtube_image: fmtubesキャッチイメージ

  • mock.jpg

    mock.jpg: fm+tubesのモックページ(デザインレイアウト)。最終的にはこのスタイルでマルチブログで展開してみる構想。

  • mtdeinfo

    mtdeinfo: Movabletypeを勉強するならこのサイト。サンプルファイルもあって、情報も探しやすいです。とてもきれいに情報表示されていて、とても参考になります。

  • mytumblr

    mytumblr: 個人の趣味でのtumblrです。女性のポートレートなんかがおおいです

  • caputure_contextmenu

    caputure_contextmenu: tumblr caputureを右クリックコンテキストメニューで選択する

  • tumblrgallery

    tumblrgallery: tumblrを使ってWEBデザインGalleryを簡単に作ってみました。

  • psdtuts

    psdtuts: http://psdtuts.com/のイメージ画像

  • designflavor.

    designflavor.: http://www.designflavr.com/のイメージ

  • entrymain_template

    entrymain_template: ブログ記事の概要は、インデックステンプレート、ブログ記事のリスト(アーカイブテンプレート)、検索結果(システムテンプレート)の3つのテンプレートで共通に使われています。それぞれのテンプレートでの表示内容の違いをイメージに表してみました。

このブログ記事について

このページは、スカイが2006年12月 1日 12:06に書いたブログ記事です。

ひとつ前のブログ記事は「Movable Type最近、気になるプラグイン・機能」です。

次のブログ記事は「Firefoxショートカット(アドレスバー入力)」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。