DOM JavaScript 要素の複製

Quick Edit Pencil
いままではcleateElementで要素を構築していましたが、cloneNodeを知ってしまった。
便利です。


【JavaScript】 DOM：要素の複製 cloneNode ( しゃいん☆のブログ| 名古屋市 Webシステム開発 サーバ構築 ネットワーク構築 株式会社コネクティボ )

cloneNode

<script type="text/javascript">
<!--
var count = 0;
function hoge() {
    // クローン生成
    tpl   = document.getElementById('template01');
    clone = tpl.cloneNode(true);
    // idとdisplayの設定
    clone.id            = "dispData_" + count;
    clone.style.display = "inline";
    // 表示
    base = document.getElementById('display_area')
    base.appendChild(clone);
    // カウンタアップ
    count++;
}
//-->
</script>
<div id="template01" style="display:none;">
<img src="http://shain.blog.conextivo.com/images/js/human_b.gif">
</div>
<div id="display_area"></div>
<input type="button" value="画像を複製して表示" onClick="hoge()">

このブログの人気の投稿

WP: 投稿一覧にカスタム分類・タクソノミーのカラムを追加する

イメージ
WordPressカスタム分類、タクソノミーを登録したら必ず行う管理画面のカスタマイズ「投稿一覧にカラムを表示」 同じ結果を３通りの方法で実現できる。 管理画面のカスタマイズ 投稿一覧にタクソノミーのカラムを追加する 管理画面のカスタマイズ 投稿一覧にカスタム分類の列を追加する３通りの方法： function.php の register_taxonomy() で設定 プラグインで設定する方法 function.php　フックを追加する方法 管理画面のカスタマイズ 1. 投稿一覧にカスタム分類のカラムを追加する： function.php の register_taxonomy() で設定する方法 function.php の register_taxonomy()　に設定値を追加する方法 register_taxonomy('area', 'post', array( 'labels' => array( 'name' => '地域名' ), 'hierarchical' => true, 'show_admin_column' => true )); 管理画面のカスタマイズ 2. 投稿一覧にカスタム分類のカラムを追加する： プラグインで設定する方法 プラグイン　Custom Post Type UI（CPT UI）　のタクソノミーの追加と編集から「管理画面でカラムを表示」を「True」にする方法 管理画面のカスタマイズ 3. 投稿一覧にカスタム分類のカラムを追加する： function.php　フックを追加する方法 投稿タイプを指定 <?php // 投稿一覧にカスタム分類のカラムの追加 function add_custom_column( $defaults ) { $defaults['add_area'] = '地域名'; //$defaults['add_[name]'] = '[タクソノミー名]'; return $defaults; } add_fi...
Read more »

AutoHotkey+powershell タスクバーをバーを自動的に隠すショートカット

タスクバーの表示と非表示.ahk #Persistent ; タスクバーの非表示化 TaskBarHide = 1 return !2:: ; タスクバーの非表示化 if TaskBarHide = { WinHide,ahk_class Shell_TrayWnd TaskBarHide = 1 } else { WinShow,ahk_class Shell_TrayWnd TaskBarHide = } return Windowsでタスクバーを消す - Liner Note on Hatena WinHide - Syntax & Usage | AutoHotkey タスクバーを自動で隠す設定(コンパネ表示).ahk #Persistent #NoEnv #SingleInstance, Force psScript = ( Get-ControlPanelItem -CanonicalName """Microsoft.Taskbar""" | Show-ControlPanelItem ) !2:: Run PowerShell.exe -Command %psScript% [PS1] Powershell で「タスクバーを自動的に隠す」を設定する | オールトの雲 タスクバーを自動で隠す(レジストリ値).ahk #Persistent psScript = ( $regp = """HKCU:\Software\Microsoft\Windows\CurrentVersion\Explorer\StuckRects3"""; $regv = (get-item $regp).getvalue("""Settings"""); if(($regv[8] -band 0x01) -eq 0x00){$regv[8] = $regv[8] -bor 0x01}else{$regv[8] = $regv[8] -band 0xFE}; set-itemproperty $regp -...
Read more »

Windows 10で、Explorerのナビゲーション ウィンドウの表示/非表示を、キーボードショートカットで切り替える方法

AutoHotkeyを使いキーボードショートカットを割り当てます。AutoHotkeyについては最後に説明。 AutoHotkeyをインストールします。 メモ帳で次のコードをコピペして保存します。 任意の名前.ahk とりあえずデスクトップに保存しダブルクリックして実行します。 /* Author: Date: Contact: */ #NoTrayIcon #Persistent #NoEnv #SingleInstance, Force #IfWinActive ahk_class CabinetWClass #z:: Send !v{n}{enter} エクスプローラーをアクティブにして　Winキー + z でナビゲーション ウィンドウの表示／非表示を切り替えられます。 ウインドウズエクスプローラーにはナビゲーション ウィンドウの表示/非表示を切り替えるショートカットは提供されていないため、キーボードから操作するならば次のようにキーを組み合わせて実行するしかありません。 エクスプローラー＞Alt>v>n>Enter このキーの組み合わせをAutoHotkeyを使いExplorerがアクティブな時にWin+zに割り当てます。（リマップする）。このスクリプト（マクロ）が上記のコードです。 リマップ - AutoHotkey Wiki ちなみにエクスプローラー標準のショートカットでは Alt+p でプレビューパネル Alt+Shift+p で詳細パネルの表示／非表示を表示できます。 AutoHotkeyとは ユーティリティソフトで、ユーザーがマクロ言語を記述して実行するとこで様々な機能を拡張することができるスクリプトエンジンです。AutoHotkey本体を実行してもヘルプしか出てきません。 AutoHotkey 　ダウンロード AutoHotkey - Wikipedia 　日本語 windows 7 - Keyboard shortcut to hide/show Explorer navigation - Super User
Read more »

Windows10でアプリケーションごとに輝度を設定、自動で変更する　-　AutoHotkey

AutoHotkeyスクリプトで実現。 AutoHotkeyをダウンロードしてスクリプトをコピペして輝度を変更したいソフトを指定してファイル保存、保存したファイルをダブルクリックして実行するとタスクバーの通知エリアに常駐するので、不要になれば終了する。とても簡単です。 グラフィック系アプリを使うときは最大輝度にて、ブラウザやオフィス系アプリに移動したらデフォルトの輝度に戻す-という使い方が最近多い。 チャームから輝度を変更できるが都度面倒なので、アプリを切り替える度に、設定した輝度に自動で変更するスクリプトを調べてみた。（イベントはアクティブウインドウの変更又はActiveWindowの切り替え） フリーソフトなども調べてみたがアプリ毎に輝度を設定できるユーティリティは見つけられなかった。 当初、PowerShellで実現できる予定だったが、アクティブウインドウ変更のイベント取得方法がわからなかったので、AutoHotkeyを使いアプリ毎に輝度の変更を自動で行うスクリプトをつくってみた。（ほぼコピペでスミマセン、一応思い通りの結果が得られて満足） マーカー部分が追記分 60行目に輝度を設定するアプリを文字列で指定。アプリ毎に識別できる文字列を含む変数が違うので ウィンドウを特定する - hoge を参考に設定。 ノートやタブレットなどの液晶一体型でウインドウズから輝度を調整できるパソコンでのみ効きます。 #Persistent ; スクリプトを常駐させる /* GPD WINの画面輝度をあれこれするAutoHotkeyスクリプト http://qiita.com/diaphragm/items/9769c79789d7a9958f8a 輝度を変更するスクリプト */ prev_brightness := GetBrightness() GetBrightness() { WMI := "winmgmts:{impersonationLevel=impersonate}!\\.\root\WMI" MonitorBrightness := ComObjGet(WMI).ExecQuery("SELECT * FROM WmiMonitorBrightness WHERE Activ...
Read more »

AppleScriptとターミナルでJavaScriptを使う

AppleScriptでJavaScriptを使いたい applescript jsc javascriptcore 具体には、URLをエンコード（url encode）したい時、 set theText to "http://ja.wikipedia.org/wiki/ アップルスクリプト " --JavaScript tell application "Safari" set theURL to ( do JavaScript "encodeURI(\"" & theText & "\")" in document 1) as text log "0=" & theURL end tell (*0=http://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%83%E3%83%97%E3%83%AB%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88*) と、Safariを経由して結果を得る方法が考えられるが、Safariを経由せず、ApplescriptでJavaScriptを使えないか探ってみた。 Safariで使われているJavaScriptCoreを直接操作する方法があった。 set theText to "http://ja.wikipedia.org/wiki/ アップルスクリプト " --JavaScript set theURL to do shell script "/System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc -e 'print(escape(\"" & theText & "\"))'" log "1=" & theURL (*1=http%3A//ja.wikipedia.org/wiki/%E3%82%A2%E3%83%83%E3%83%9...
Read more »

書字方向　横書方向変換スクリプト　左書きから右書きへ（コピペ用途）

左横書きを右横書きへ簡易変換します．（コピペ用途） 変換処理はウェブブラウザだけで完了．ネットワーク通信が発生しないので安心．注，複数行の場合は一行になりそう．また，句読点（符号），顔文字の正確な変換は１００％無理っぽ． 変換する文字列（横左方向→） テスト 変換した文字列（←横右方向） 書字方向　横書方向変換スクリプト　HTMLソース JavaScriptコード 変換する値（横左方向→） <form name="form1"> <textarea cols="50" name="textarea1" rows="5" value="1">テスト</textarea> </form> <input onclick="clickBtn1()" type="button" value="変換" /> <input onclick="clickBtn2()" type="button" value="クリア" /> <p>変換した値（←横右方向）</p> <p id="rtl" style="background-color: lightgrey; box-sizing: border-box; color: darkslategrey; line-height: 1.6; overflow: auto; padding: 1rem; text-align: right;"></p> <script> function clickBtn1(){ // 値を取得 const ta1 = document.form1.textarea1.value; const reversed = [...ta1].reduceRight((p, c) => p + c);// 配列に変換し右から左へたたみ込む。 document.getElementById(...
Read more »

onloadの代わりにDOMContentLoadedを使ってみる

onloadの代わりにDOMContentLoadedを使ってみる - へぼいいいわけ onloadイベントだと DOM の構築が完了しても画像を読み込み終わるまで待ってしまうので、代わりにDOMContentLoadedイベントを使って処理させてみます。 IE にはDOMContentLoadedがないのでdocument.documentElement.doScroll("left")を監視して DOM 構築が終わるまで 再帰 しています。 // DOM構築完了時の処理 function load() { /* なんかいろいろ */ } ; // ユーザーエージェント var userAgent = navigator.userAgent.toLowerCase(); // ページの構築が完了したらloadを呼び出す ( function () { if ( document .addEventListener) { // opera,safari,mozilla向け document .addEventListener( "DOMContentLoaded" , load, false ); } else if ( /msie/ .test(userAgent)) { // IE向け try { document .documentElement.doScroll( "left" ); } catch (error) { setTimeout( arguments .callee, 0); return ; } load(); } else { // その他 window .onload = load; } } )();
Read more »