jQuery使ってたらネイティブDOMが浦島太郎になってた話

先日仕事でEC-CUBEの2系のカスタマイズしてたんです。

内容的にはformにinput type=hiddenな項目追加するというもの。

既存のソースにあんまり手を入れたくないし、
複数サイトに横展開していかなきゃいけないのでモジュール(アドオン)化したくって
JSから要素追加しちゃえ!ってこんな感じの操作をさせたんですね。

$("#form").append('<input type="hidden" name="hogehoge" value="">');

ところがこれがなぜか動かない!!

首をひねりながら色々調べる事30分
$がprototypeになってたっていうね(笑

一般的な対処は

jQuery("#form").append('<input type="hidden" name="hogehoge" value="">');

ってすればいいんでしょうけど。。。

jQueryに依存してったのってこの部分だけなので、この際全部ネイティブで書いちゃおうかと思ったんですね。

私の知ってるネイティブなDOM(level3)ってappend([DomNode])しかなくて。。。
これがとってもメンドクサイ( ˘•ω•˘ )

querySelector()が知らぬ間に出来てたのを思い出して、もしかしてなんか出来てるかも?
で、ちょいと調べたら素敵なメソッド出来てるじゃん!!

var form = document.querySelecter("#form");
form.insertAdjacentHTML('beforeend','<input type="hidden" name="hogehoge" value="">');

なんでもコア技術が好きな私としてはめちゃくちゃ感動してたんです!!

で、今日になってquerySelector()とかも追加されてるしもしかしてDOM Level4出てる?
なんて思って調べてみた。

DOM4 REC-dom-20151119
あるじゃーん!
DOM Level4じゃなくてDOM 4 !?
Levelとこ行ったの!!!Σ( ̄□ ̄;

って突っ込みつつ長らく浦島太郎だったことを思い知ったのでした。。。