Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: innerHTML и динамические div'ы в цикле

Всем доброго времени суток!
Вопрос знатокам javascript. Есть вот такой код.
<!DOCTYPE html>
<html>
    <head>
        <title>JS</title>
    </head>
    <style>
        body{
            margin: 0;
        }
        #contaner{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            margin: 0;
            padding: 0;
            height: 32px;
        }
        .first{
            width: 30px;
            height: 30px;
            background: green;
            display: inline-block;
            margin: 1px;
            padding: 0;
        }
        .main{
            width: 30px;
            height: 30px;
            background: blue;
            display: inline-block;
            margin: 1px;
            padding: 0;
        }
        span{
            width: 30px;
        }
    </style>
    <body>
        <div id="contaner"></div>
    </body>
    <script type="text/javascript">
     
        var stop = 5;
        var cntr = document.getElementById("contaner");
     
        for(var i=0; i<stop; i++){
            var wrap = document.createElement("div");
            wrap.className = "wrapper";
            cntr.appendChild(wrap);
         
            for(var j=0; j<stop; j++){
         
                var first = document.createElement("div");
                    first.className = "first";
                    wrap.appendChild(first);
             
                if(j == 3){
                    first.innerHTML = j;
                }
            }
        }
     
    </script>
</html>

Вывод дает результат при котором дивы, находящееся в блоке if, вываливаются из общего ряда.
Если убрать блок if, тогда все нормально.
Вопрос! Почему так происходит?
Заранее благодарю за помощь.
Ответ: Почему - ХЗ, а исправить можно так
<!DOCTYPE html>
<html>
    <head>
        <title>JS</title>
    </head>
    <style>
        body{
            margin: 0;
        }
        #contaner{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            margin: 0;
            padding: 0;
            height: 32px;
        }
        .first{
            width: 30px;
            height: 30px;
            background: green;
            display: inline-block;
            margin: 1px;
            padding: 0;
        }
        .main{
            width: 30px;
            height: 30px;
            background: blue;
            display: inline-block;
            margin: 1px;
            padding: 0;
        }
        span{
            width: 30px;
        }
    </style>
    <body>
        <div id="contaner"></div>
    </body>
    <script type="text/javascript">
     
        var stop = 5;
        var cntr = document.getElementById("contaner");
     
        for(var i=0; i<stop; i++){
            var wrap = document.createElement("div");
            wrap.className = "wrapper";
            cntr.appendChild(wrap);
         
            for(var j=0; j<stop; j++){
         
                var first = document.createElement("div");
                    first.className = "first";
                    wrap.appendChild(first);
                    first.innerText = '\n';

                if(j == 3){
                    first.innerText = j;
                }
            }
        }
     
    </script>
</html>
Вопрос: если пустое innerHTML

Если попробовать назначить переменную вот так:

var a = document.getElementById('id тега').innerHTML;


а содержимое тега отсутствует, то вылезает ошибка, что нельзя прочитать свойство 'null'.
Есть идеи, как назначить переменную, если innerHTML отсутствует?
Ответ:
Сообщение от Nexus
Свойства «innerHTML» может не быть, если элемент не был найден, либо (не уверен, проверять лень) это input или подобный элемент.

Upd. Таки проверил, у input'ов это свойство имеется ().
Nexus,

это ячейка таблицы:

<td id = blablabla></td>
Вопрос: Не заменяется элемент (innerHTML)

Почему не заменяется элемент HTMLLIElement по свойству innerHTML?
Код

<script type='text/javascript'>
function access() {
alert(document.all.length);
var string = "";
var win = window.open('', 'Mywin', 'innerWidth=700, innerHeight=800');
for (i = document.all.length - 1; i >= 0; i--) {
string += document.all[i] + '<br>'; 
if (document.all.item("krok") instanceof HTMLLIElement)
document.all.item("krok").innerHTML="Good day";
}
win.document.write(string);
win.document.close();
}
</script>

p.s. пытался вставлять name="krok" в теги <div>, <span>, <p> - все равно не дает результата... не заменяет

Это сообщение отредактировал(а) Webtoper - 21.12.2014, 19:57
Ответ:
Цитата(Webtoper @  22.12.2014,  15:37 )
А что вместо этого используют?

если говорить про тренды - большинство сейчас использует jQuery.

Если говорить про официальные альтернативы, то выбираете в зависимости от задач. То есть смотря что выбираете. Если элемент по ID (самая быстрая выборка), то document.getElementById, если по тегу - то getElementsByTagName.

Вообще вот, почитайте: 

Есть еще более современный и модный нативный аналог jquery-like селекторов: 
Вопрос: Изменение DOM с помощью innerHTML

Здраствуйте.
Получилось, что из-за собственных пробелах в знаниях я долго бился с неочевидным(возможно лишь для меня) поведением.
Опытным путем мне удалось найти источник проблемы. Проблема была в добавлении элементов дом с помощью innerHTML: после добавление таким способом к полученным ранее элементам с помощью jQuery не работали методы insertAfter или просто after(возможно не работало вообще все. Вплоть до изменение стилей).
Я сделал небольшое демо и 2 вариации.
Есть контенер с двумя типами элеметов(.b и .a). В .a примешиваются элементы .b с некоторым шансом.
Перед самим примешиванием я добавляю еще один .b элемент(разными спобами) и в варианте с innerHTML потом не могу работать с ранее полученными элементами. Если вставка через append(понятно, что метод append jquery вызывает нативный ), то он не генерит новый дом, а лишь действительно (поэтому старые элементы все еще куда-то указывают), в то время как elem.innerHTMl += "html_text" разворачивается в elem.innerHTML = elem.innerHTML + "html_text" и весь дом у нас получается новый, плюс происходит, что старые ноды никуда не деваются, ведь на них все еще указывается jquery like обьект(и потенциально мы выхватываем лишнию память, для уже несуществующих узлов - да?)...
Итак, демо:
1)
2)
Какая помощь мне нужна:
Какой литературой я могу восполнить свои знания и в каких еще случаях я могу столкнуться с такими проблемами?
Есть ли в моих размышлениях какие-то ошибки?
Я наслышан, что прямые методы работы с dom занимают больше времени, чем простой innerHTML, но что если у нас вставки в dom происходят достаточно часто и относительно большими пачками(штук 20), при этом к тому моменту уже могут находиться ~100элементов и перерисовывать их нежелательно из-за усложенения анимации :с Может ли быть такое, что использовать innerHTML на каком-то этапе станет менее оптимально, нежели вставка через dom методы?
Ответ: .b пятый есть и .b четвертый, а вот a. нет в дом вообще после innerHTML.
Иначе как ты обьяснишь, что после innerHTML пропадает родитель у .a?
console.log($a.eq(0).parent().prop("tagName"))
Вопрос: Не работает getElementById()

Что здесь не работает, не могу понять!

<html>
<head>
<meta charset="UTF-8">
<title>Форма</title>
<script>
var email=document.getElementById("email").value;
function blur() {
if (email=="") {
email="Email";
}
}
function focus() {
if(email=="Email") {
email="";
}
}
document.getElementById("email").onblur=blur();
document.getElementById("email").onfocus=focus();
</script>
</head>
<body>
<form>
<input type="text" value="Email" id="email">
<input type="text" value="Имя" id="name">
</form>
</body>
</html>
Ответ: Ну да. Я просто не заметил, что в переменную записывается значение свойства value импута email, хотя нужно было бы добавить в него сам объект импута, а в функциях blur и focus проводить манипуляции уже с его свойством value.
<html>
<head>
    <meta charset="UTF-8">
    <title>Форма</title>
    <script>
        window.onload = function() {
            var email=document.getElementById("email");
            function blur() {
                if (email.value=="") {
                    email.value="Email";
                }
            }
            function focus() {
                if(email.value=="Email") {
                    email.value="";
                }
            }
            document.getElementById("email").onblur=blur;
            document.getElementById("email").onfocus=focus;
        }
    </script>
</head>
<body>
<form>
    <input type="text" value="Email" id="email">
    <input type="text" value="Имя" id="name">
    <input type="button" value="go" onclick="alert(email.value)">
</form>
</body>
</html>
Вопрос: зачем getElementById

Зачем нужен getElementById, если все элементы и так доступны по id?
Пишу просто имя элемента, которое было объявлено в html, и все работает. Во всех источниках пишут про getElementById, как будто другого способа нет. В чем секрет и где зарыта собака?
Ответ:
Цитата:
По-моему, то, что удобнее, то и более современное.
Нет. Код должен быть еще и очевидным.

Цитата:
a.b.c (через точку к дочерним элементам) нельзя обращаться.
Можно document.getElementById("a").getElementById("b"), но зачем? Результат будет тот же, что и при document.getElementById("b"), идентификатор уникальным же должен быть.

Цитата:
Или они не загружены, а поиск в DOM объекте выполняется при каждом неизвестном имени?
Да.
Вопрос: Помогите с getElementById

Вопрос в следующем:
делаю так:
var AllItems = document.getElementsByClassName('ItemPrice');
	 for (var t=0; t<=AllItems.length-1; t++) {
		var Idline = AllItems[t].getAttribute('id'); //<---тут работает
		Idline = Idline.replace('idItemLine_', '');
		var TD_IMG = AllItems[t].getElementById('Images_'+Idline);
                  А ТУТ НЕ РАБОТАЕТ!!!


AllItems[t].getElementById is not a function
что за ошибка, я то понимаю, но почему? getAttribute сработал ведь

зы. кроссбраузерность не нужна, javascripts в chrome больше нигде использоваться не будет
Ответ: Signal, потому что только так document.getElementById
Вопрос: InnerHTML не работает

<!DOCTYPE html>
<html>
<head>
	<script src="jquery-2.1.3.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){

			var clas = $('#a');
			clas.innerHTML = '12312'
		});

	</script>

</head>
<body>
<div id="a">text</div>
<div class="a">text</div>
<div class="a">text</div>

</body>
</html>


По сути ведь должно применить изменения к id="a", но этого не происходит. Почему ?
Ответ: x0st,
у обьекта clas нет свойства innerHTML -- это свойство есть только у элемента -- элемент div c id = 'a' хранится в ключе 0 этого обьекта
clas[0].innerHTML = '12312'
Вопрос: innerHTML выполнить синхронно

Здравствуйте, делаю что-то вроде веб визивиг редактора с пиксельпёфектом, использую psd.js чтобы парсить psd. Проблема такая: обычный psd парсится долго, большой psd выдает ошибку вроде стэк оверфлёу, но это потом, сейчас я хочу выводить инфу о прогрессе загрузки. reader.onprogress успешно выводит проценты до 81, а потом у меня такое:

reader.onload = (e) ->
     info.innerHTML = "Загружено 100%"
     setTimeout ->
          *Мучительно долгий код*
     , 1


Просто innerHTML ничего не останавливает и выводит только после того, как последующий код выполнится. setTimeout(func, 0) ситуацию не исправил, а setTimeout(func, 1)... Тоже не исправил! Я почему-то себе думал, что подобные функции синхронны, что с этим сделать?

Прим. меня: долго - это 60-80 сек
Ответ: Я понял в принципе!
info.innerHTML = "Загружено 100%" - тут браузер понял, что нужно делать и дальше пошел, js отработал, а браузерная часть, которая должна DOM обновить, только получила команду от js
Дальше после таймаута в 0, 1, 25, 50 мс начинает исполняться тяжелый код и браузер виснет, и та часть, которая DOM обновляет, тоже по-ходу виснет, вот и все чудеса, сделаю логику саму по-другому и будет нормально.
Вопрос: Проблема с записью в getElementById("dt").value

Здравствуйте! Не могу записать дату в дату =) Люди помогите!)


<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>

<body>
<input type="date" id="dt">

<script>
document.getElementById("dt").value = new Date();
</script>

</body>
</html>
Ответ:
Сообщение от Ruslan_xDD
GVY,
echo 'document.getElementById("dat").value= "' . $dt . '";

Спасибо всем за помощь! Вот это то самое!