createElement
最近javascriptを触ることが多い。んで、下のような例を用意してみた。ここで詰まった。
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <!-- スタイルシートここから --> <style type="text/css"> <!-- .text1 {color: red;font-size: 24pt;font-weight: 900;} body { text-align: center; } div#wrapper { width: 800px; margin: 0 auto; text-align: left; border: 1px solid #FF0000; } --> </style> <!-- javascriptここから --> <script type="text/javascript" src="jquery-1.6.4.js"></script> <script type="text/javascript"> <!-- function func1(){ var obj = document.createElement("span"); obj.setAttribute("id", "koko"); obj.innerHTML = "テスト文字列なのです〜" obj.setAttribute("class", "text1"); document.getElementById("koko").appendChild(obj); } function func2(){ var obj = document.createElement("<span class=\"text1\">"); obj.setAttribute("id", "koko"); obj.innerHTML = "テスト文字列なのです〜" document.getElementById("koko").appendChild(obj); } jQuery(document).ready( function() { $("#jquery_test").click(function(){ $("<span/>", { "class": "text1", text: "テスト文字列なのです〜" }).appendTo('#koko'); }); }); --> </script> <head> <title>createElementテスト</title> </head> <body> <div id="wrapper"> <H2>createElement</H2> <input type="button" value="createElement1" onClick="func1();"></input><br /> <input type="button" value="createElement2" onClick="func2();"></input><br /> <input id="jquery_test" type="button" value="createElement3"></input><br /> <br /> <div id="koko">下から来るぞ!気をつけろ!</div> </body> <!--/ #wrapper--></div> </html> </html>
IEだとどちらのボタンでもテキストが追加される。
Firefox, chromeだと追加されない。Firefoxさんは文法に厳密なのだ。
追記:2011/09/25 jQueryを使ったテキスト追加を作ってみた。jQueryでcreateElementは実装できるんだじぇ