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は実装できるんだじぇ