HOME

{ HTML テキスト(タグ)一括作成 : HtmlText クラス }

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

推奨 ブラウザ : chrome

{ HTML テキスト(タグ)一括作成 : HtmlText クラス }
{ 処理する配列 }

こちらに修正版があります。 → { ソースコードハイライト表示 ( β : 02 ) : javascript } var result = new HtmlText ( ["div","class","d0","テキスト1","=>text",["br"],"=>child","テキスト2","=>text"] ).get(); //任意のタイミングでの要素追加と取得 var tag = new HtmlText();// HtmlTextインスタンス生成 tag.add('div','class','d0');// 親要素作成 tag.add(['span','class','s0']);// 子要素(1)追加 子要素追加は配列 tag.add(['span','class','s1']);// 子要素(2)追加 子要素追加は配列 var result = tag.get();//html タグ取得 //一括取得 var result = new HtmlText(["div","id","d0",["span","テキスト1","=>text"],"=>child"]).get(); 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> になります。

{ 実行結果 }

createHtmlText 関数 → { 配列を利用した HTML テキスト(タグ)一括作成 : javascript }
DOM 版 → { 配列を利用した DOM 要素一括作成 : javascript }
前回作成した createHtmlText 関数では後からの要素追加ができなかったので、
クラス化して配列(要素)を任意のタイミングで追加出来るようにしてみました。
クラス は、あまり使ったことがないので、要領が掴めてないかもしれません。_(:3」∠)_

//任意のタイミングでの要素追加と取得 var tag = new HtmlText();// HtmlTextインスタンス生成 tag.add( 'div' , 'class' , 'd0' );// 親要素作成 要素追加は String tag.add( [ 'span' , 'class' , 's0' ] );// 子要素(1)追加 子要素追加は配列 tag.add( [ 'span' , 'class' , 's1' ] );// 子要素(2)追加 子要素追加は配列 var result = tag.get();//html タグ取得 //一括取得 var result = new HtmlText( [ "div" , "id" , "d0" , [ " span" , "テキスト1" , "=>text" ] , "=>child" ] ).get();
使い方は、テキスト版とほぼ同じです。
大きく違うのは、最初に new で、インスタンス化?、、、 new を付けて、 HtmlText を呼び出す必要があります。
配列の作成方法は、同じです。
var tag = new HtmlText();
任意のタイミングでの要素追加と、タグ取得は、
最初に、
tag.add( 'div' ); メソッド? の、引数に String を入れて親要素を作成します。
その後、
tag.add( [ 配列 ] ); メソッドで、引数に配列を入れてタグを追加していきます。
タグを取得する場合は、
tag.get(); メソッドを走らせます。

一括取得の場合は、
var result = new HtmlText( [ 配列 ] ).get();
HtmlText の後に get(); を付けます。

やっぱり、 普通に DOM 要素を作って、それ対して要素を追加していくか、
普通にタグを書いたほうが安全で、効率もいいと思います。┏( .-. ┏ ) ┓

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