HOME

{ 配列を利用した HTML テキスト(タグ)一括作成 : javascript }

{ svg, javascript で作成したプログラム一覧 }

推奨 ブラウザ : chrome

{ 配列を利用した HTML テキスト(タグ)の一括作成 : javascript }
{ 処理する配列 }

こちらに修正版があります。 → { ソースコードハイライト表示 ( β : 02 ) : javascript } var htmText = createHtmlText ( ["div","class","d0","テキスト1","=>text",["br"],"=>child","テキスト2","=>text"] ); A : 要素名, B : 属性, C : 属性値, [] : 配列, 配列の初めが A, 後は B, C, の繰り返し
[ A, B, C, B, C, B, C, B, C,...] ← 要素作成
[ A, B, C, B, C,,,,,],"=>child" : 子要素(配列の場所 B) [ A, B, C,[ A, B, C ,B, C ],"=>child", B, C,,,,] ← 子要素作成 [ A, B, C, テキスト,"=>text", B, C,,,,] ← テキスト作成 "テキスト","=>text" : テキストの場所 : B <br> は、<br></br> になります。

{ 実行結果 }

以前に作成した → { 配列を利用した DOM 要素一括作成 : javascript } のテキスト版です。
使い方は、 DOM 版とほぼ同じです。
テキストなので、 DOM 版では出来た、 root 配列の最初に DOM 要素を入れることは出来ません。
確認した範囲では、 DOM 版と同じく、要素の入れ子、属性設定、テキストの挿入が出来ます。

DOM 版のコードみてて、テキスト版も行けそうな気がしたので、
色々試してみてたら思い通りの結果が出力されました。ヽ(´ー`)ノ
DOM 版と テキスト版 で重たい配列の処理をさせて、時間を比べてみましたが、大きな違いはありませんでした。
もっと、重たい処理をさせると結果は違ってくるのかもしれません。
テキスト版 では、正規表現を使用しています。
ソースコードをハイライト表示するプログラム作成に正規表現を使用したのですが、
処理が激重になってしまいました。
なので、 DOM 版のほうが、いいような気もしますが、詳しいことはわかりません。
テキスト版は、一回書き出すと、後から、そのテキストに対しての処理が出来ない?ように思います。
テキストに後からデータを追加するには、配列にデータを追加して、再処理する必要がありそうです。
なので、この関数は、タグを書き出す最初の一回しか使い道がなさそうです。_(:3」∠)_
クォーテーションやカンマに気を使いながら配列を書くよりは、
普通にタグを書いたほうが効率がいいように思います。

数学の勉強をやり直ししてたりします。_´ω`)_