innerText(textContent)/innerHTMLを使ったHTMLエスケープは充分でないので今すぐやめろ、お前たちはもう終わりだ - TODESKING// jQueryでHTMLエスケープする例 function escape(content) { return $('<div />').text(content).html() }
insertAdjacentHTMLとinnerHTMLの速度の違い2 - jsdo.it - Share JavaScript, HTML5 and CSS
先に表示される赤いのがinnerHTML。 次の下の方に短い緑のがinsertAdjacentHTML。 右に行くほど、よりたくさんつまった要素に挿入しています。 棒にマウスを載せると時間が表示されます。 insertAdjacentHTMLの処理時間が一定なのに対して、 innerHTMLは値のサイズに比例して処理時間がかかる。 function measureAndDrawGraph(settings){ // 文字列を要素に挿入する関数 var insertTextTo = (function(){ if(settings.method === "innerHTML"){ return function(elm){ elm.innerHTML += settings.addingText; }; }else if(settings.method === "insertAdjacent
javascript - 特定のDOMをソース表示する : 404 Blog Not Found
2008年07月13日16:00 カテゴリTipsLightweight Languages javascript - 特定のDOMをソース表示する すでにいくつかのentriesで使っているのですが、かなり便利なので改めて紹介。 表示元 表示したいHTMLを適当にdivタグで囲ってidを振っておく。ここではhtml2show 表示先として空のpreを作っておき、そこにもidを振っておく。ここではhtmlsrc 以下のようなscriptを、preタグの直下に転がしとく (function(src, dst){ dst.appendChild(document.createTextNode(src.innerHTML)) })( document.getElementById('html2show'), document.getElementById('htmlsrc') ); もちろん以下
HTML要素の位置取得 - elm200 の日記(旧はてなダイアリー)
趣旨 ウェブページとして描画された HTML 要素の画面上の位置を取得する。一見簡単そうに見えるこの作業が、現在実装されているブラウザ上ではとてつもなく難しい。そのことを以下で説明していく。 情報ソース この問題に関して調べたところ、最もよく出来ているエントリは、susie-t 氏による offsetTop/offsetLeft/offsetParentの闇 である。とてつもない力作で、実に多くのケースにわたって、包括的に探究が行われている。まるで犯人を追跡する刑事のような執拗さである。氏の自己紹介では「ナマケモノのプログラマ」とか謙遜されているが、これはとてもナマケモノにできる仕事ではない。 基本中の基本として W3C CSS 2.1 の次の章を抑えておきたい。 8 Box model 9 Visual formatting model 10 Visual formatting mode
セクション内容の参照について (agenda)
div2 が認識可能であるか、XHTML で Pre-HTML 的に <div class="div2"> といった感じでマークアップしていれば、var div2 = document.getElementById('h-7.5').nextSibling; といった感じで id="h-7.5" な属性を持つ h2 要素の次の要素として div2 に相当する要素が取得でき、ここだけユーザに提供する、といった事が簡単に行えます。 Hack Or Die 2007/12 - Ancient libraryより といった感じ、というわけでこれでは殆どのケースでdiv2相当のdiv要素を参照することはできない。これで参照できるのは、h2の終了タグとdivの開始タグが隣接していることが分かっている場合だけだ。普通はソース整形のためのテキストノードになってしまう場合が多いだろう。 // 見出し要素とd
document.title の罠 - IT戦記
このエントリは一部間違っています。 こちらで訂正いたしました。 http://d.hatena.ne.jp/amachang/20070523/1179928332 いや大したことじゃないんですけど かなりハマったのでメモしときます。 通常ページのタイトルは以下で取れる var title = document.title; alert(title); // タイトルを表示 しかし、コンテンツ内に <div id="title"></div> のように id が title のものがあると var title = document.title; alert(title); // [object HTMLDivElement] となってしまう。 これでかなりはまった まとめ 不特定のページから title を取るような場合は多少めんどくさいけど document.getElementsByT
js-html - JavaScriptを用いたHTMLの省略記法 - Personnel
次のHTML文書の断片をDOM APIを利用して生成してみます： <div class="container" id="foo"> <h2>だいあろぐ</h2> <label> <input type="button" onclick="alert(true)" /> </label> </div> 実際にやってみると次のようになります（一例）。 var div = document.createElement('DIV'); var h2 = document.createElement('H2'); h2.appendChild(document.createTextNode('だいあろぐ')); div.appendChild(h2); var label = document.createElement('LABEL'); var input = docu
404 Blog Not Found:javascript - DOMMakerで楽々DHTML
2006年09月28日02:00 カテゴリLightweight Languages javascript - DOMMakerで楽々DHTML DHTMLは便利なものだが、DOM関連の関数でHTMLを「描く」のは、あまりに面倒だ。 たかだか <a target="blank" href="http://blog.livedoor.jp/dankogai">404 Blog Not Found</a> とやるのに、 var a = document.createElement('a'); a.setAttribute('target', 'blank'); a.setAttribute('href', 'http://blog.livedoor.jp/dankogai'); a.appendChild(document.createTextNode('404 Blog Not Found'
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.stevetucker.co.uk/page-innerxhtml.php