Использование innerHTML

Hapson · July 23, 2013

Здравствуйте.

Вот недавно начал изучать 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}
</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>

SelenIT · July 23, 2013

Сейчас стандартизовано в "живом стандарте" WHATWG и вот-вот стандартизуется в W3C DOM Parsing and Serialization, на который ссылается W3C HTML5.0. Так что, имхо, можно

Hapson · July 24, 2013

Сейчас стандартизовано в "живом стандарте" WHATWG и вот-вот стандартизуется в W3C DOM Parsing and Serialization, на который ссылается W3C HTML5.0. Так что, имхо, можно

Спасибо за ссылки.

Это очень хорошо. То есть, если хватает innerHTML, то нечего огород городить как-то иначе.

Sign In

Использование innerHTML

Question

Hapson

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

SelenIT

Link to comment

Share on other sites

Hapson

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information