1つ前のサンプルにcreateTextNode()を組み合わせてリストの文字も表示させてみた

createElement()でli要素を作り、createTextNode()でTextノードを作る。 そして、appendChild()でli要素に作ったTextノードを子要素として追加している。 最後に、このliをmyListの最後に追加している。1つ前のサンプルと要比較。

実行結果

1. JavaScript
2. VBScript
3. JScript

source

<ol id="myList">
<li>JavaScript</li>
<li>VBScript</li>
<li>JScript</li>
</ol>

<script language="javascript">
function testAppend()	{
	var elem = document.createElement('li');
	var txt =  document.createTextNode('ECMAScript')
	elem.appendChild(txt)
	var main = document.getElementById('myList');
	main.appendChild(elem);

}
</script>
<button onclick="testAppend()">TEST</button>