�v�f�̒lj�
<script type="text/javascript">
<!--
window.onload = function() {
	if (!document.createElement) return;

	var ele = document.createElement("div");		// �V�K�ɗv�f�i�^�O�j�𐶐�
	var str = document.createTextNode("����������");	// ��������v�f�̒l�i������j
	ele.appendChild(str);					// ��������v�f�̍쐬�i�v�f�ɒl��lj��j

	document.body.appendChild(ele);				// ���̃y�[�W (document.body) �̍Ō�ɐ��������v�f��lj�
}
// -->
</script>

�����̃G�������g�i�v�f�j�ɕʂ̗v�f��lj�����ꍇ�� createElement() ���g�p���ĐV���ȗv�f�𐶐����܂��B��������v�f�Ƀe�L�X�g��lj�����ꍇ�� createTextNode() ���g�p���� appendChild() �Œlj����܂��B�����āA�lj�����v�f���w�肵���v�f�̍Ō�� appendChild() �Œlj����܂��B

��L�̃X�N���v�g�����s����ƃy�[�W�̈�ԍŌ�� <div>����������</div> �Ƃ����v�f��lj����邱�Ƃ��ł��܂��B

�C�ӂ̏ꏊ�ɒlj�����
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>�T���v��</title>
<script type="text/javascript">
<!--
function appendTest1() {
	if (!document.createElement || !document.getElementById) return;

	// ��������v�f�Ƒ���
	var img = document.createElement("img");
	img.setAttribute("src", "./image/picture/bg01.gif");	// img.src = "./image/picture/bg01.gif";
	img.setAttribute("alt", "�ʐ^");			// img.alt = "�ʐ^";

	document.getElementById("pic").appendChild(img);	// pic �Ƃ��� id �ɒlj�
}
function appendTest2() {
	if (!document.createElement || !document.getElementById) return;

	var a = document.createElement("a");
	a.href = "./index.html";
	var str = document.createTextNode("[BACK]");
	a.appendChild(str);

	document.getElementById("link").appendChild(a);
}
function appendTest3() {
	if (!document.createElement) return;

	var opt = document.createElement("option");
	opt.value = "ddd";
	var str = document.createTextNode("DDD");
	opt.appendChild(str);

	document.form1.select1.appendChild(opt);
}
// -->
</script>
</head>
<body>
<p id="pic">����������</p>
<a href="javascript:appendTest1();">�摜��lj�</a>

<p id="link">����������</p>
<a href="javascript:appendTest2();">�����N��lj�</a>

<form action="#" name="form1">
<select name="select1" size="5" onchange="alert(this.value);">
<option value="aaa">AAA
<option value="bbb">BBB
<option value="ccc">CCC
</select>
<input type="button" value="�lj�" onclick="appendTest3();">
</form>
</body>
</html>

����������

�摜��lj� �����N��lj�
��Mac IE �͕s��

�lj��������v�f�� id �� name �����Ŗ��O��t���Ă������ƂŔC�ӂ̏ꏊ�ɒlj����邱�Ƃ��ł��܂��B

�v�f�ɑ�����lj�����ꍇ�́AsetAttribute("������", "�����l"); �̂悤�� setAttribute() ���g�p���Ēlj����܂����A�قƂ�ǂ̑������i�����Ŏg�p���Ă��� src, alt, href, value ���j�͑Ώۂ̗v�f�ɒ��ڎw�肷�邱�Ƃ��ł��܂��B

�h���b�v�_�E���̕������ text �����𒼐ڎw�肷��ꍇ�iMacintosh �ł� Internet Explorer 5.x �Œlj�����Ȃ��ꍇ���܂ށj

option ��C�ӂ̈ʒu�ɒlj�����
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>�T���v��</title>
<script type="text/javascript">
<!--
function appendTest4(obj) {
	if (!document.createElement) return;

	var insert = 2;					// <option> ��lj�����ʒu�i��ԏ��0�j
	var opt = document.createElement("option");
	opt.value = "ccc";
	var str = document.createTextNode("CCC");
	opt.appendChild(str);

	obj.insertBefore(opt, obj.options[insert]);
}
// -->
</script>
</head>
<body>
<form action="#">
<select name="select1" size="5" onchange="alert(this.value);">
<option value="aaa">AAA
<option value="bbb">BBB
<option value="ddd">DDD
</select>
<input type="button" value="�lj�" onclick="appendTest4(this.form.select1);">
</form>
</body>
</html>
��Mac IE �͕s��

�C�ӂ̈ʒu�� option �̃��X�g��lj��������ꍇ�� insertBefore() ���g�p���Ēlj����邱�Ƃ��ł��܂��B�lj��ꏊ�� options[insert] �ɂĎw�肵�܂��B�֐��Ăяo������ appendTest4(this.form.select1); �Ƃ��đ�����Ă��܂��̂ŁA���� obj �͌Ăяo�����t�H�[���̃Z���N�g�����w���܂��BinsertBefore() �ňʒu (obj.options[insert]) ���w�肵�āA�lj��������v�f (opt) ��lj��Ώ� (obj) �ɒlj� (insertBefore) ���܂��B

���̗�ł́A�ォ��2�ԖځiBBB �� DDD �̊ԁj�ɒlj�����܂��B�ʂ̕��@�ł̒lj����@�iMacintosh �ł� Internet Explorer 5.x �Œlj�����Ȃ��ꍇ���܂ށj

�w�肵���v�f�ɒlj�����
<script type="text/javascript">
<!--
if (document.createElement && document.getElementsByTagName) {
	// �lj�����V�����v�f�Ƒ���
	var meta = document.createElement("meta");
	meta.name = "viewport";
	meta.content = "width=device-width, initial-scale=1.0";

	document.getElementsByTagName("head")[0].appendChild(meta);	// document.getElementsByTagName("head").item(0).appendChild(meta);

	var favicon = new Array("icon", "shortcut icon");
	for (var i in favicon) {
		var link = document.createElement("link");
		link.rel = favicon[i];
		link.type = "image/x-icon";
		link.href = "./favicon.ico";

		document.getElementsByTagName("head")[0].appendChild(link);
	}

	var script = document.createElement("script");
	script.type = "text/javascript";
	script.src = "./script.js";

	document.getElementsByTagName("head")[0].appendChild(script);
}
// -->
</script>

���Ƃ��΁Ameta �� link �Ȃǂ̃w�b�_�ɋL�q����^�O�̏ꍇ�́A���̗v�f�𐶐��������ƒl���w�肵�܂��B<head> �� HTML �̒���1�‚Ȃ̂� document.getElementsByTagName("head")[0] �Ƃ���1�Ԗڂ� <head> �ɒlj����܂��B

��L�̃X�N���v�g�����s����� <head> �` </head> �Ɉȉ��̗v�f��lj����邱�Ƃ��ł��܂��B

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="./favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
<script type="text/javascript" src="./script.js"></script>
[PR] Yahoo!�V���b�s���O