- 締切済み
innerhtmlとdocumentwriteどっちつかう？
HTMLソース内のメニュー部分をカスタマイズしやすいように、 HTMLソースをjavascritpで外部化し表示しています。 現在は「documentwrite」で書き出していますが、どうやら「innerhtml」という方法でソースを書き換え表示できるとを知りました。「innerhtml」か「documentwrite」どっちを使うほうがいいのでしょうか？ また、一番お勧めのわかりやすく紹介しているサイトをご存知でしたら教えて下さい。
- midorin_h
- お礼率10% (14/136)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- himajin100000
- ベストアンサー率54% (1660/3060)
おまけ: appendChild使うとMinefieldとIEで滅茶苦茶苦労しそうな例。 解説は一切無し。 Opera 9.5 Beta でしか動作を確認できてない不完全なものだ。 完全にするには再帰的な関数を書かざるを得ないかもしれない。 あ，Opera 9.5でサンプル試すときはtextareaに記述したルート要素に XHTMLの名前空間を宣言する名前空間宣言つけてください <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Q3603911 TestCase 4</title> <style type="text/css"> input { font-size: 12px; font-family:monospace; } #output{ position:absolute; font-size:24px; white-space:pre; font-family:monospace; } </style> <script type="text/javascript"> function check(){ var input = document.getElementById("input").value; var output = document.getElementById("output"); var parser = null; var dom = null; if(document.implementation.hasFeature('LS', '3.0')){ alert("Standard Compliant Mode(Standard)"); var LSI = document.implementation.createLSInput(); LSI.stringData = input; parser = document.implementation.createLSParser(document.implementation.MODE_SYNCHRONOUS,null); dom = parser.parse(LSI); } /* Non Standard Compilant Start */ else if ((typeof(DOMParser) != "undefined")){ alert("DOMParser Mode(Non-Standard)"); parser = new DOMParser(); dom = parser.parseFromString(input, "text/xml"); }else if(typeof(ActiveXObject) != "undefined"){ alert("ActiveX Mode(Non-Standard)"); dom =new ActiveXObject("MSXML.DOMDocument"); dom.async=false; dom.loadXML(input); } /* Non Standard Compilant End */ if((dom == null) || (dom.documentElement.nodeName == "parsererror") ){ var errors = document.getElementById("errors"); var temp = document.createElementNS("http://www.w3.org/1999/xhtml","p") temp.appendChild(document.createTextNode("エラーが発生しました")); errors.appendChild(temp); }else{ /* Minefieldでエラー: Error: uncaught exception: [Exception... "Node cannot be used in a document other than the one in which it was created" code: "4" nsresult: "0x80530004 (NS_ERROR_DOM_WRONG_DOCUMENT_ERR)" (略)] IEでエラー:インターフェースがサポートされていません。 */ output.appendChild(dom.documentElement); } } </script> </head> <body> <!-- form要素を用いると,action属性やmethod属性を指定しなければならなくなるため--> <p><textarea cols="100" rows="10" id="input"></textarea></p> <p><input type="button" value=" 確認 " onclick="check()" /></p> <div id="output"> </div> <div id="errors" > </div> </body> </html>
- steel_gray
- ベストアンサー率66% (1052/1578)
document.write…書き出し専用 innerHTML…書き換え専用 です、現状がページ生成中にdocument.writeで書き出しているならば単純にinnerHTMLに置き換える事はできません。 ページのロード終了後(onload)または書き換えたい要素の生成後に使うならinnerHTMLや#1さんの仰る方法になります。 ソースを書き出したい/書き換えたいタイミングで使い分けるだけで、どちらが良いという事もないかと思います。 なお、innerHTMLはIEの独自拡張が他のブラウザにも広まったもので、多少利用に制限があるようです。 http://www.usamimi.info/~vingtsept/Browser/index_j.html ついでにinnerHTMLの使い方 http://www.tohoho-web.com/js/element.htm#innerHTML （さらについでに、innerHTMLに似ているinnerTextの方はIEでしか動作しません）
- himajin100000
- ベストアンサー率54% (1660/3060)
XML寄りの考え方をしているので innerHTMLもdocument.writeもどちらも嫌いです。 #例外として， (getAttributeとかでも取得できないので) HTMLInputElementインターフェースのvalueプロパティやcheckedプロパティは使わせて貰っている document.createElement document.createTextNode IEを考えなくて良ければ，前者はdocument.createElementNSを使います。 後者はtextContentでもいいのですが，IEを考えたとき，innerTextとの分岐を考えなくて済むので利用しています。 ただ，欠点として「ノードの全ての子要素を削除する関数等を実装しないといけない」というのがあると思います こうして生成したノードを document.getElementByIdで取得したノードのappendChildメソッドで追加していきます。 #余程HTML,XML,XHTMLの文法に詳しくない限り，ソースコードを直接弄るのはお勧めしません。どこかで文法ミスしていることが多いから。 /* PHPのXML DOMは最も嫌い。 C#とJavaは個人的に許容範囲 */
