innerHTML と outerHTML の使用可否のまとめ

ie で読み取り専用になっている要素タグには innerHTML は使えません。代替手段として outerHTML を利用して動的に書き換えるテクなどがあります。読み取り専用の要素は例えば table 要素が該当しますが、ちょっとやそっと調べたところで何が読み取り専用の要素なのか資料がでてきません。

と言うわけで適当にスクリプト書いて調べてみました。取りあえず調べた要素は以下の通りです。Internet Explorer Developer Center < meta Object に記述されている要素一覧です。html 要素は outerHTML すると ie がフリーズするので調査対象外です。

<a>　<abbr>　<acronym>　<address>　<applet>　<area>　<attribute>　<b>　<base>　<baseFont>　<bdo>　<bgSound>　<big>　<blockQuote>　<body>　<br>　<button>　<caption>　<center>　<cite>　<clientInformation>　<clipboardData>　<code>　<col>　<colGroup>　<comment>　<currentStyle>　<custom>　<dataTransfer>　<dd>　<defaults>　<del>　<dfn>　<Dialog>　<dir>　<div>　<dl>　<document>　<dt>　<em>　<embed>　<event>　<external>　<fieldSet>　<font>　<form>　<frame>　<frameSet>　<head>　<history>　<hn>　<hr>　<i>　<iframe>　<img>　<implementation>　<input>　<ins>　<isIndex>　<kbd>　<label>　<legend>　<li>　<link>　<listing>　<location>　<map>　<marquee>　<menu>　<meta>　<namespace>　<navigator>　<nextID>　<noBR>　<noFrames>　<noScript>　<object>　<ol>　<optGroup>　<option>　<p>　<page>　<param>　<plainText>　<popup>　<pre>　<q>　<rt>　<ruby>　<rule>　<runtimeStyle>　<s>　<samp>　<screen>　<script>　<select>　<selection>　<small>　<span>　<strike>　<strong>　<style>　<styleSheet>　<sub>　<sup>　<table>　<tBody>　<td>　<textArea>　<TextNode>　<TextRange>　<TextRectangle>　<tFoot>　<th>　<tHead>　<title>　<tr>　<tt>　<u>　<ul>　<userProfile>　<var>　<wbr>　<window>　<xml>　<XMLHttpRequest>　<xmp>　<IMPORT
- スポンサーリンク -

適当にでっちあげたスクリプトなので検証結果は外してるところもあるかもしれません。ちなみに ie 以外は

var obj = createElement('div');

とかで生成したオブジェクトに対して innerHTML や outerHTML で内容を変更できるの ie だけは appendChild とか使ってドキュメントオブジェクトに node として追加した上でその node に対して変更を加えなければ内容変更ができませんでした。なのでスクリプトが面倒なことになってます。
（※何言っているか書いてると意味不明だけど自分が忘れないための備忘録です。）


innerHTML / outerHTML の使用可否および readonly かの検証ソースはこちら

document に生成した要素を node 追加してその要素に対して innerHTML / outerHTML を使って内容を変更できるかを検証しています。ie7 / firefox2 / opera9 で検証をしました。 


<html><body>

<div id="log" style="font-family: monospace"></div>
<textarea id="logtx" cols="100" rows="10"></textarea>
<div id="work" style="display: none"></div>

<script type="text/javascript">
function $(id){ return document.getElementById(id) }
var ELEM = new Array (
'a','abbr','acronym','address','applet','area','attribute','b','base','baseFont','bdo','bgSound','big','blockQuote','body','br','button','caption','center','cite','clientInformation','clipboardData','code','col','colGroup','comment','currentStyle','custom','dataTransfer','dd','defaults','del','dfn','Dialog','dir','div','dl','document','dt','em','embed','event','external','fieldSet','font','form','frame','frameSet','head','history','hn','hr','i','iframe','img','implementation','input','ins','isIndex','kbd','label','legend','li','link','listing','location','map','marquee','menu','meta','namespace','navigator','nextID','noBR','noFrames','noScript','object','ol','optGroup','option','p','page','param','plainText','popup','pre','q','rt','ruby','rule','runtimeStyle','s','samp','screen','script','select','selection','small','span','strike','strong','style','styleSheet','sub','sup','table','tBody','td','textArea','TextNode','TextRange','TextRectangle','tFoot','th','tHead','title','tr','tt','u','ul','userProfile','var','wbr','window','xml','XMLHttpRequest','xmp','IMPORT');

var html = [];
html.push('<table bgcolor="#000" border="1">');
html.push('<tr bgcolor="#ffffff"><td>tagname</td><td>object</td><td>innerHTML</td><td>outerHTML</td></tr>');
for( var i=0; i≶ELEM.length; i++ ){
    var err1   = 'ok';
    var err2   = 'ok';
    var canvas = $('work');
    try {
        var elem  = document.createElement(ELEM[i]);
        canvas.appendChild(elem);
        var e1 = canvas.lastChild; e1.innerHTML = ELEM[i];
        var e2 = canvas.lastChild;
        if(e2.innerHTML!=ELEM[i]) err1='readonly';
    } catch(e) { err1 = e; }
    try {
        var elem  = document.createElement(ELEM[i]);
        var org = elem.outerHTML || '';
        if(org){
            var org = elem.outerHTML; canvas.appendChild(elem);
            var e1 = canvas.lastChild; e1.outerHTML = e1.outerHTML.replace('>', '>' + ELEM[i]);
            var e2 = canvas.lastChild;
            if(e2.outerHTML==org) err2='readonly';
        } else { err2='not support'; }
    } catch(e) { err2 = e; }
    html.push('<tr bgcolor="#ffffff"><td>' +ELEM[i]+ '</td><td>' +elem+ '</td><td>' +err1+ '</td><td>' +err2+ '</td></tr>');
}
html.push('</table>');
$('log').innerHTML = html.join("");
$('logtx').innerHTML = html.join("").replace(/</g, '<').replace(/>/g, '>');
</script>

</body></html>


さて以下検証結果です。Error がでている部分が使用不可（エラーがでる読込専用）の部分です。readonly の部分が読込専用（エラーがでない）の部分です。not support はその命令がブラウザでサポートされていない場合です。

ie7 firefox2 opera9
tagname object(opera9) inner outer inner outer inner outer
a 　 ok ok ok not support ok ok
abbr [object
HTMLElement]		 ok ok ok not support ok ok
acronym [object
HTMLElement]		 ok ok ok not support ok ok
address [object
HTMLElement]		 ok ok ok not support ok ok
applet [object
HTMLAppletElement]		 [object
Error]		 ok ok not support ok ok
area 　 [object
Error]		 ok ok not support ok ok
attribute [object
HTMLUnknownElement]		 ok ok ok not support ok ok
b [object
HTMLElement]		 ok ok ok not support ok ok
base [object
HTMLBaseElement]		 ok ok readonly not support ok ok
baseFont [object
HTMLBaseFontElement]		 ok ok readonly not support ok ok
bdo [object
HTMLElement]		 ok ok ok not support ok ok
bgSound [object
HTMLElement]		 [object
Error]		 ok readonly not support ok ok
big [object
HTMLElement]		 ok ok ok not support ok ok
blockQuote [object
HTMLQuoteElement]		 ok ok ok not support ok ok
body [object
HTMLBodyElement]		 [object
Error]		 ok ok not support ok ok
br [object
HTMLBRElement]		 [object
Error]		 ok readonly not support ok ok
button [object
HTMLButtonElement]		 ok ok ok not support ok ok
caption [object
HTMLTableCaptionElement]		 ok ok ok not support ok ok
center [object
HTMLElement]		 ok ok ok not support ok ok
cite [object
HTMLElement]		 ok ok ok not support ok ok
clientInformation [object
HTMLUnknownElement]		 ok ok ok not support ok ok
clipboardData [object
HTMLUnknownElement]		 ok ok ok not support ok ok
code [object
HTMLElement]		 ok ok ok not support ok ok
col [object
HTMLTableColElement]		 [object
Error]		 ok ok not support ok ok
colGroup [object
HTMLTableColElement]		 ok ok ok not support ok ok
comment [object
HTMLUnknownElement]		 [object
Error]		 readonly ok not support ok ok
currentStyle [object
HTMLUnknownElement]		 ok ok ok not support ok ok
custom [object
HTMLUnknownElement]		 ok ok ok not support ok ok
dataTransfer [object
HTMLUnknownElement]		 ok ok ok not support ok ok
dd [object
HTMLElement]		 ok ok ok not support ok ok
defaults [object
HTMLUnknownElement]		 ok ok ok not support ok ok
del [object
HTMLModElement]		 ok ok ok not support ok ok
dfn [object
HTMLElement]		 ok ok ok not support ok ok
Dialog [object
HTMLUnknownElement]		 ok ok ok not support ok ok
dir [object
HTMLDirectoryElement]		 ok ok ok not support ok ok
div [object
HTMLDivElement]		 ok ok ok not support ok ok
dl [object
HTMLDListElement]		 ok ok ok not support ok ok
document [object
HTMLUnknownElement]		 ok ok ok not support ok ok
dt [object
HTMLElement]		 ok ok ok not support ok ok
em [object
HTMLElement]		 ok ok ok not support ok ok
embed [object
HTMLEmbedElement]		 [object
Error]		 ok readonly not support ok ok
event [object
HTMLUnknownElement]		 ok ok ok not support ok ok
external [object
HTMLUnknownElement]		 ok ok ok not support ok ok
fieldSet [object
HTMLFieldSetElement]		 ok ok ok not support ok ok
font [object
HTMLFontElement]		 ok ok ok not support ok ok
form [object
HTMLFormElement]		 ok ok ok not support ok ok
frame [object
HTMLFrameElement]		 [object
Error]		 ok ok not support ok ok
frameSet [object
HTMLFrameSetElement]		 ok [object
Error]		 ok not support ok readonly
head [object
HTMLHeadElement]		 [object
Error]		 [object
Error]		 ok not support ok ok
history [object
HTMLUnknownElement]		 ok ok ok not support ok ok
hn [object
HTMLUnknownElement]		 ok ok ok not support ok ok
hr [object
HTMLHRElement]		 [object
Error]		 ok readonly not support ok ok
i [object
HTMLElement]		 ok ok ok not support ok ok
iframe [object
HTMLIFrameElement]		 [object
Error]		 ok ok not support ok readonly
img [object
HTMLImageElement]		 [object
Error]		 ok readonly not support ok ok
implementation [object
HTMLUnknownElement]		 ok ok ok not support ok ok
input [object
HTMLInputElement]		 [object
Error]		 ok readonly not support ok ok
ins [object
HTMLModElement]		 ok ok ok not support ok ok
isIndex [object
HTMLIsIndexElement]		 [object
Error]		 ok readonly not support ok ok
kbd [object
HTMLElement]		 ok ok ok not support ok ok
label [object
HTMLLabelElement]		 ok ok ok not support ok ok
legend [object
HTMLLegendElement]		 ok ok ok not support ok ok
li [object
HTMLLIElement]		 ok ok ok not support ok ok
link [object
HTMLLinkElement]		 [object
Error]		 ok readonly not support ok ok
listireadonly [object
HTMLElement]		 ok ok ok not support ok ok
location [object
HTMLUnknownElement]		 ok ok ok not support ok ok
map [object
HTMLMapElement]		 ok ok ok not support ok ok
marquee [object
HTMLElement]		 ok ok ok not support ok ok
menu [object
HTMLMenuElement]		 ok ok ok not support ok ok
meta [object
HTMLMetaElement]		 [object
Error]		 ok readonly not support ok ok
namespace [object
HTMLUnknownElement]		 ok ok ok not support ok ok
navigator [object
HTMLUnknownElement]		 ok ok ok not support ok ok
nextID [object
HTMLUnknownElement]		 [object
Error]		 ok ok not support ok ok
noBR [object
HTMLElement]		 ok ok ok not support ok ok
noFrames [object
HTMLElement]		 [object
Error]		 readonly ok not support ok readonly
noScript [object
HTMLElement]		 [object
Error]		 readonly ok not support ok readonly
object [object
HTMLObjectElement]		 [object
Error]		 ok ok not support ok ok
ol [object
HTMLOListElement]		 ok ok ok not support ok ok
optGroup [object
HTMLOptGroupElement]		 ok ok ok not support ok readonly
option [object
HTMLOptionElement]		 ok ok ok not support ok ok
p [object
HTMLParagraphElement]		 ok ok ok not support ok ok
page [object
HTMLUnknownElement]		 ok ok ok not support ok ok
param [object
HTMLParamElement]		 [object
Error]		 ok readonly not support ok ok
plainText [object
HTMLElement]		 ok ok ok not support ok ok
popup [object
HTMLUnknownElement]		 ok ok ok not support ok ok
pre [object
HTMLPreElement]		 ok ok ok not support ok ok
q [object
HTMLQuoteElement]		 ok ok ok not support ok ok
rt [object
HTMLUnknownElement]		 ok ok ok not support ok ok
ruby [object
HTMLUnknownElement]		 ok ok ok not support ok ok
rule [object
HTMLUnknownElement]		 ok ok ok not support ok ok
runtimeStyle [object
HTMLUnknownElement]		 ok ok ok not support ok ok
s [object
HTMLElement]		 ok ok ok not support ok ok
samp [object
HTMLElement]		 ok ok ok not support ok ok
screen [object
HTMLUnknownElement]		 ok ok ok not support ok ok
script [object
HTMLScriptElement]		 [object
Error]		 readonly ok not support ok ok
select [object
HTMLSelectElement]		 ok ok readonly not support ok ok
selection [object
HTMLUnknownElement]		 ok ok ok not support ok ok
small [object
HTMLElement]		 ok ok ok not support ok ok
span [object
HTMLElement]		 ok ok ok not support ok ok
strike [object
HTMLElement]		 ok ok ok not support ok ok
stroreadonly [object
HTMLElement]		 ok ok ok not support ok ok
style [object
HTMLStyleElement]		 [object
Error]		 readonly ok not support ok ok
styleSheet [object
HTMLUnknownElement]		 ok ok ok not support ok ok
sub [object
HTMLElement]		 ok ok ok not support ok ok
sup [object
HTMLElement]		 ok ok ok not support ok ok
table [object
HTMLTableElement]		 [object
Error]		 ok ok not support ok ok
tBody [object
HTMLTableSectionElement]		 ok ok ok not support ok ok
td [object
HTMLTableCellElement]		 ok ok ok not support ok ok
textArea [object
HTMLTextAreaElement]		 ok ok ok not support ok ok
TextNode [object
HTMLUnknownElement]		 ok ok ok not support ok ok
TextRange [object
HTMLUnknownElement]		 ok ok ok not support ok ok
TextRectangle [object
HTMLUnknownElement]		 ok ok ok not support ok ok
tFoot [object
HTMLTableSectionElement]		 ok ok ok not support ok ok
th [object
HTMLTableCellElement]		 ok ok ok not support ok ok
tHead [object
HTMLTableSectionElement]		 ok ok ok not support ok ok
title [object
HTMLTitleElement]		 ok ok readonly not support ok ok
tr [object
HTMLTableRowElement]		 ok ok ok not support ok ok
tt [object
HTMLElement]		 ok ok ok not support ok ok
u [object
HTMLElement]		 ok ok ok not support ok ok
ul [object
HTMLUListElement]		 ok ok ok not support ok ok
userProfile [object
HTMLUnknownElement]		 ok ok ok not support ok ok
var [object
HTMLElement]		 ok ok ok not support ok ok
wbr [object
HTMLElement]		 [object
Error]		 ok readonly not support ok ok
window [object
HTMLUnknownElement]		 ok ok ok not support ok ok
xml [object
HTMLElement]		 ok ok ok not support ok ok
XMLHttpRequest [object
HTMLUnknownElement]		 ok ok ok not support ok ok
xmp [object
HTMLElement]		 ok ok ok not support ok ok
IMPORT [object
HTMLUnknownElement]		 ok ok ok not support ok ok

ご自分のブラウザで検証したい場合は、こちらの検証ボタンをクリックしてみて下さい。


- スポンサーリンク -

関連する記事＆スポンサーリンク