appendに関する小さな罠

調べればすぐわかることではあるんだけど。

目次

環境

• JQuery 2.2.4
• JavaScript

IE11で要素が表示されない

IE11でボタンが表示されない、との連絡があった。Chromeでは問題なく表示されている。

問題は、こちらのEdgeのエミュレーションIE11ではちゃんと表示されていることだ。再現しないのでちょっとやりづらい。

コード自体は簡単で、append()を使ってボタン要素を突っ込んでいるだけ。

var space = kintone.app.record.getSpaceElement('foo');
var text = 'ボタン';
var btn = $('<button>'));
btn[0].append(text);
space.append(btn[0]);

JavaScriptのappend()と、JQueryのappend()

IEでappend()が効かない事例があるのかと調べてみたら、普通にあった。

JavaScriptのappend()はIE11では非対応なので、appendChild()を使うべし、とある。

あれ、jQueryではappend()使えるはずでは……と思ってよくよく見たら、jQueryオブジェクトになってなかった。成ル程。

kintone JavaScript カスタマイズ CheatSheet - Qiita

こちらのjQueryUIのパートで事例があった。kintone.app.record.getSpaceElementをJQueryの書式でくるんでjQueryオブジェクトにし、appendを使っている。

var space = $(kintone.app.record.getSpaceElement('foo'));//jQueryでwrap
var text = 'ボタン';
var btn = $('<button>'));
btn[0].append(text);
space.append(btn[0]);

参考記事

• JavaScriptのappendとappendChildの違い - みかづきブログ その3
• jquery - Appending element is not working in IE11 - Stack Overflow
• kintone JavaScript カスタマイズ CheatSheet - Qiita