<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
<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��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
<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>
�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
<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>