const arr = [11, 22, 33]; const index = 1; const value = 99; arr.splice(index, 0, value); console.log(arr); // => [ 11, 99, 22, 33 ] const arr = [11, 22, 33]; const index = 1; const value = 99; arr.splice(index, 1, value); console.log(arr); // =>[ 11, 99, 33 ] 第2引数を 0 にするとただ挿入するだけ、 1 だと置き換えます。 仕様 Array.prototype.splice() – JavaScript | MDN array.splice(start[, deleteCount[, item1[, item2[, ...]]]]
各種と言いながら三種類だけだけど。 実例は挿入の方に。 要素ノード createElement(tagName) で作ります。 子として作るなら innerHTML も使えます。 文字列ノード createTextNode(text) で作ります。文字列ノードの文字列の内容は後から nodeValue で取得、設定できます。 子として作るなら textContent も使えます。 文書断片 (document fragment) createDocumentFragment() で作ります。 使い方は後で。 複製して作成 cloneNode() を使うと、既存のノードを複製して新しいノードを作成する事ができます。 // elLabel = <label class="super-label"><input type="checkbox" checked>同意する</label> var e
DOMおれおれAdvent Calendar 2015 – 01日目 HTML文字列からががーっと生成する場合は el.innerHTML=htmlText と書くのが普通だと思うんですが、 insertAdjacentHTML() というAPIもあります。 var el = document.querySelector('div#out'); var html = '<b>BOLD</b>'; var position = 'afterbegin'; el.insertAdjacentHTML(position, html); // -> <div><b>BOLD</b></div> "position" はHTML文字列を挿入する位置を指定します。以下のいずれかです。 "beforebegin" "afterbegin" "beforeend" "afterend" それぞれ開始タグの
jQueryでテキストを追加するたびにスクロールさせる方法を紹介します。 1.問題点 ログを出力するような感じで、あるエリアにテキストを1行ずつ追加していき、出力した最後の行にスクロールするようなことをやりたいのですが、方法が分かりません。 2.テキストを追加出力してスクロールさせる まず、テキスト(コンテンツ)の追加はappend()で行います。 $("#log").append("コンテンツ"); 次に、出力したエリアをスクロールさせるには次のように行います。 $("#log").scrollTop( $("#log")[0].scrollHeight ); scrollTopは要素の上端からのスクロール位置、scrollHeightはoverflowで画面上に表示されていない要素の内容も含め、全体の高さを示すものです。 つまり、要素の上端から要素の高さ分をスクロールさせています。 3
WordPressでブログを書く上で、<strong> や<code>、<img>、<!–more–> などのタグを利用することも多いと思います。 記事の投稿画面では、上記のような基本的なタグは「ボタン」として最初から用意されていますが、「頻繁に使う他のタグもここに置きたい!」という場合に便利なプラグインが AddQuicktag です。 例えば、AddQuicktag の設定画面で <pre> タグを登録しておくと、記事の投稿画面に <pre> タグ挿入用のボタンが新たに追加される、という感じです。 タグの他に「ショートコード」なども登録できますので、頻繁に使うコードを AddQuicktag で管理しておくことで記事の編集が捗ります。 なお、AddQuicktag はカスタム投稿タイプには対応していないので、今回はその辺りの対応方法も含めて紹介致します。 AddQuicktag のイン
Movable Typeのコミュニティ機能でCKEditorプラグインを記事作成画面に適用した際、ファイルや画像の挿入を行えるようにする「InsertFileEnablerプラグイン」を公開します。 1.問題点 以前、「Movable Typeのコミュニティ機能でCKEditorを利用する」という記事をエントリーしました。 このカスタマイズを行えば、スクリーンショットのように、コミュニティブログやコミュニティ掲示板の記事作成画面でCKEditorを利用することができます。 (クリックで拡大) ただし、ファイルや画像の挿入用のアイコンをクリックすると、 次のようなサインイン画面が表示されてしまいます。「ユーザー名」は入力できない状態になっているため、サインインすることもできません。 この事象に対し、「なんとかなりませんか」という要望や質問が相次ぎましたので、とりあえずサインインできるようにす
便利そうだったので備忘録です。 記事内に様々なコンテンツを挿入 できるWordPressのプラグイン。 ショートコードを管理画面内で 簡単に作れる、みたいな感じです。 結構便利なのでは。 任意のコンテンツをショートコードで挿入できるWPプラグインです。アドセンスやフォーム、PHPコード、HTMLなど、挿入可能なコンテンツは多岐にわたります。 管理画面内でコンテンツを作るとショートコードが発行されるので、そのショートコードで挿入、という感じ。勿論複数作れますよ。 挿入するコンテンツのタイプを選んで下部に挿入内容を書きます。PHPは<?や>を抜いて書きます。 基本的になんでも挿入できるのでアイデア次第ではとっても便利になるかと思います。アドセンス、ウィジェット、定型文等を記事の任意の場所に挿入、管理画面内で内容も管理できるのは素敵ですね。 いろいろ出来そうだけど、セキュリティやマルチユーザーサ
Welcome to the home of amateurinterracial.biz Enter
jQueryのtext()とhtml()の違いについて紹介します。jQueryビギナー向けのエントリーです。 1.text()について text()は指定した要素のテキストノードを返却します。 簡単な例として、次のようなHTMLマークアップがあるとします。 <div class="foo">Demonstration Box</div> このマークアップに対して $('.foo').text(); を実行すると、次のような結果を返却します。 Demonstration また、text()は指定した要素に含まれる子孫要素のテキストノードすべてを結合して返却します。 例えば次のようなHTMLマークアップがあるとします。 <div class="foo"> <div class="bar">Demonstration Box</div> <ul> <li>list item 1</li> <li
擬似要素はCSS1から存在するもので、ここで解説する「:before, :after擬似要素」はCSS2.1でリリースされたものです。 CSS1では「:first-letter, :first-line」です。 擬似クラス、擬似要素 擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。 コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3ではコロンを二つにした「::before, ::after」などがあります。 サポートブラウザブラウザ 「:before, :after擬似要素」をサポートするブラウザは下記の通りです。 IE8+ Firefox3.5+ Chrome Safari4+ Opera6+ IE8+とすべてのモダンブラウザと言ってよいでしょう。 非サポートブラウザへの対応 IE7にも「:before, :after擬似要素」を利
Posted: 2012.06.29 / Category: javascript / Tag: jQuery 局地的にしか使用できませんが、管理画面などで画像一覧を表示させて選択するとテキストエリアにパスを挿入するプラグインです。 Code Mirrorというテキストエリアを快適にするプラグインに対応しています。 準備 画像を一覧表示するhtmlを作ります。 基本的にBootstrapなマークアップにしています。 media-list1.html <section id="media-list"> <table class="table table-striped table-bordered table-condensed"> <thead> <tr> <th></th> <th>ID</th> <th>Title</th> <th>Image</th> </tr> </thead>
WordPressの投稿画面で、Flickrで CCライセンス画像を検索、クレジット 表記付きで投稿できるプラグイン、 Pick a Pictureのご紹介です。個人 的にはあまり利用しませんが、需要は ありそうな気がします。 以前、全く同じプラグインをご紹介しました。 画像を投稿する際にFlickrで検索、著作権表示付きで記事に挿入出来るプラグイン・Flickr Photo Post こちらよりも今日紹介するプラグインの方が使い勝手が良かったので改めて紹介します。 画像のアップロード項目にFlickr検索が加わります。CC-BYなのでクレジット表記が必要ですが、このプラグインはクレジットも付けてくれます。 ↑ 以前紹介したFlickr Photo Postでの不満点は1ページの検索件数が少なくて探しにくいことでした。Pick a Pictureでは12件、24件、54件、102件と選択で
Movable Typeでアイテムを利用しているブログ記事一覧を表示する「AssetEntriesプラグイン」を公開します。下のスクリーンショットはアイテムを利用しているブログ記事一覧を表示サンプルです。 1.プラグインの機能 AssetEntriesプラグインは、MTAssetsタグまたはMTAssetタグ内で動作するMTAssetEntiresブロックタグを提供します。各テンプレートタグの具体的な利用方法は3項を参照してください。 本プラグインはMT5.0/MT5.1で動作確認しています。 2.プラグインのダウンロード・インストール 下記のリンクをクリックして、プラグインアーカイブをダウンロードします。 AssetEntries_0_01.zip プラグインアーカイブを展開し、中にあるAssetEntriesフォルダごと、Movable Type のアプリケーションディレクトリのplu
リンクの挿入をより便利にするプラグイン(InsertLink)の、Movable Type 5.0x/5.1対応版(バージョン1.31)を公開します。 Movable Type 5.1RC2で動作を確認しました。 また、Movable Type 5.0xでも動作します。 Movable Type 5.2では、対応版をご利用ください。 従来のバージョン(1.30)は、Movable Type 5.1では正しく動作しません(ボタンが表示されません)。 Movable Type 5.0xで当プラグインをお使いの方は、バージョン1.31にアップグレードしておくと、Movable Type 5.1にアップグレードしても、そのまま当プラグインを使い続けることができます。 プラグインは以下からダウンロードすることができます。 InsertLink_1_31.zip ダウンロードしたファイルを解凍すると、
久しぶりの[自動フォーマット]ネタです(図001)。Flash Professional CS5で確かめています。 図001■ifステートメント内の静的メソッド呼出しにコメントを加える すると、ifステートメントブロックの閉じ括弧}を、ひとつ余分に加えてくれます(図002)。 図002■ifステートメントステートメントブロックの閉じ括弧}が余分に加わる もちろん、括弧の対応が合わなくなります。もう一度[自動フォーマット]を行えば、シンタックスエラーを告げる警告が表れます(図003)。このパターンは、以前にもありました。ほとんど因縁をつけられているようなものです。 図003■警告のダイアログボックスがシンタックスエラーを告げる この記事にコメントを書く 記事に対するテクニカルな質問はご遠慮ください(利用規約)。 名前(必須): メールアドレス: URL: この情報を登録しますか? コメント:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く