innerHTML....?
Здравствуйте.
Вот недавно начал изучать JS и есть вопрос по свойству innerHTML. Везде говорят, что это свойство типа неофициальное и его не нужно использовать. Так ли это? Вот небольшой пример: Это кусок из формы для добавления статьи на сайт. В этом куске устанавливается текущая дата и время, плюс пользователь может дату и время изменить. Сначала все поля рисуются PHP. Если пользователь меняет месяц или год, то отрабатывает JS и перерисовывает select с днями - в соответствии с выбранным месяцем и годом. В коде закомментирован кусок с innerHTML, а выше его альтернатива. Можно ли использовать именно innerHTML. Ведь в данном случае с ним намного проще. (код рабочий - если есть сервер можно попробовать) <!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Language" content="ru" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
function check_date(){
var year = parseInt(document.getElementById('year').value);
var month = parseInt(document.getElementById('month').value);
var element = document.getElementById("day");
var day = new Date();
var md;
if(year % 4 == 0){
switch(month){
case 2: md = 29; break;
case 4: case 6: case 9: case 11: md = 30; break;
default: md = 31;
}
}else{
switch(month){
case 2: md = 28; break;
case 4: case 6: case 9: case 11: md = 30; break;
default: md = 31;
}
}
var select = document.getElementById('day');
select.options.length = 0;
for(var i = 1; i <= md; i++){
var option = document.createElement('OPTION');
select.appendChild(option);
option.value = i;
if(i == day.getDate()){
select.options[i-1].selected = true;
}
var text = document.createTextNode(i);
option.appendChild(text);
}
/*element.innerHTML = '\n';
for(var i = 1; i <= md; i++){
var sel = '';
if(i == day.getDate()){
sel = ' selected';
}
element.innerHTML += '<option'+ sel +' value="'+ i +'">'+ i +'</option>\n';;
}*/
}
</script>
</head>
<style type="text/css">
html{background: #fff;}
body{width: 800px; margin: 20px auto; background: #ddd; padding: 20px; border: 1px solid}
.empty{box-shadow: 0 0 10px #f00;}
</style>
<body>
<h3>Дата</h3>
<form action="" method="post">
<select name="day" id="day">
<?php
for($day = 1; $day <= 31; $day++){
$sel = NULL;
if($day == date("d")){
$sel = " selected";
}
echo "<option$sel value=\"". $day ."\">$day</option>\n";
}
?>
</select>
<select name="month" id="month" onchange="check_date()">
<?php
for($month = 1; $month <= 12; $month++){
$sel = NULL;
if($month == date("m")){
$sel = " selected";
}
switch($month){
case 1: $month_name = "января"; break;
case 2: $month_name = "февраля"; break;
case 3: $month_name = "марта"; break;
case 4: $month_name = "апреля"; break;
case 5: $month_name = "мая"; break;
case 6: $month_name = "июня"; break;
case 7: $month_name = "июля"; break;
case 8: $month_name = "августа"; break;
case 9: $month_name = "сентября"; break;
case 10: $month_name = "октября"; break;
case 11: $month_name = "ноября"; break;
case 12: $month_name = "декабря";
}
echo "<option$sel value=\"". $month ."\">$month_name</option>\n";
}
?>
</select>
<select name="year" id="year" onchange="check_date()">
<?php
for($year = date("Y") - 10; $year <= date("Y"); $year++){
$sel = NULL;
if($year == date("Y")){
$sel = " selected";
}
echo "<option$sel value=\"". $year ."\">$year</option>\n";
}
?>
</select>
<input type="text" name="hour" size="2" value="<?php echo date("H") ?>">
<input type="text" name="minute" size="2" value="<?php echo date("i") ?>"><br><br>
<input type="submit" value="Go">
</form>
</body>
</html>
|
да, я тоже слышал, что innerHTML не официально. но однако браузеры его успешно поддерживают
|
Цитата:
ЗЫ И еще такой вопросик. Если добавлять элементы option через DOM, то как организовать перенос строки, а то не комильфо в исходном коде |
innerHTML можно использовать без проблем. Более того, на массивных операциях это позволяет увеличить производительность. Вот только не нужно впадать в крайности. Я бы например предпочел такой вариант:
for (var i = 1; i <= md; i++){
var option = document.createElement('OPTION');
option.innerHTML = option.value = i;
option.selected = (i == day.getDate());
select.appendChild(option);
}
|
количество дней в месяце или зависимые селекты
:write: всё без PHP
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
html{background: #fff;}
body{width: 800px; margin: 20px auto; background: #ddd; padding: 20px; border: 1px solid}
.empty{box-shadow: 0 0 10px #f00;}
</style>
<script>
window.onload = function () {
var day = new Date,
md = (new Date(day.getFullYear(), day.getMonth() + 1, 0, 0, 0, 0, 0)).getDate(),
$month_name = "января февраля марта апреля мая июня июля августа сентября октября ноября декабря".split(" ");
function set_select(a, c, d, e) {
var el = document.getElementsByName(a)[0];
for (var b = el.options.length = 0; b < c; b++) {
el.options[b] = new Option(a == 'month' ? $month_name[b] : b + d, b + d);
}
el.options[e] && (el.options[e].selected = !0)
}
set_select("day", md, 1, day.getDate() - 1);
set_select("month", 12, 1, day.getMonth());
set_select("year", 11, day.getFullYear()-10, 10);
document.getElementsByName('hour')[0].value = day.getHours()
document.getElementsByName('minute')[0].value = day.getMinutes()
var year = document.getElementById('year');
var month = document.getElementById("month");
function check_date() {
var a = year.value | 0,
c = month.value | 0;
md = (new Date(a, c, 0, 0, 0, 0, 0)).getDate();
a = document.getElementById("day").selectedIndex;
set_select("day", md, 1, a)
};
if (document.addEventListener) {
year.addEventListener('change', check_date, false);
month.addEventListener('change', check_date, false);
} else {
year.detachEvent('onchange', check_date);
month.detachEvent('onchange', check_date);
}
}
</script>
</head>
<body>
<h3>Дата</h3>
<form action="" method="post">
<select name="day" id="day"></select>
<select name="month" id="month" ></select>
<select name="year" id="year" ></select>
<input type="text" name="hour" size="2" value="">
<input type="text" name="minute" size="2" value=""><br><br>
<input type="submit" value="Go">
</form>
</body>
</html>
|
| Часовой пояс GMT +3, время: 17:11. |