Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   innerHTML....? (https://javascript.ru/forum/dom-window/40100-innerhtml.html)

Hapson 23.07.2013 20:20

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>

skrudjmakdak 23.07.2013 20:30

да, я тоже слышал, что innerHTML не официально. но однако браузеры его успешно поддерживают

Hapson 23.07.2013 20:35

Цитата:

Сообщение от skrudjmakdak (Сообщение 263856)
да, я тоже слышал, что innerHTML не официально. но однако браузеры его успешно поддерживают

Ну вот и я о том же. Может это отголоски IE6(--):)
ЗЫ И еще такой вопросик.
Если добавлять элементы option через DOM, то как организовать перенос строки, а то не комильфо в исходном коде

danik.js 24.07.2013 00:48

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);
        }

рони 24.07.2013 01:33

количество дней в месяце или зависимые селекты
 
: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, время: 23:30.