Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Помощь в изменении кода javascript (https://javascript.ru/forum/misc/49128-pomoshh-v-izmenenii-koda-javascript.html)

same4 30.07.2014 14:52
Помощь в изменении кода javascript
 
Здравствуйте. Я только-только начинаю изучать javascript, в основном работаю с html/css , но дошел до того, что без javascript мне не обойтись.

У меня есть код, отвечающий за вывод информации в

Код:
<input type='text'>
var main_input = document.getElementById('input');
var main_output = document.getElementById('output');

function EnterCommand(){
    if (main_input.value == 'test'){
     SendMessage();
        return;
    }
  
    main_output.innerHTML = 'Команда не существует';
}
function SendMessage(){
    main_output.innerHTML = 'Просто тест';
}


Как вы уже поняли, скрипт выводит сообщение о написанной пользователем команды. Если же такой команды нет, то выполняется команда:

function SendMessage(){
    main_output.innerHTML = 'Просто тест';


Но в этом скрипте мне нужно кое-что добавить, а именно:

При отправки команды, поле

Код:
<input type='text'>
становилось пустым. Сейчас же оно хранит команду, введенную пользователем.

Еще бы хотелось переносить на новую строку каждую команду. То есть сейчас, когда пользователь ввел новую команду, то предыдущая удаляется, а хотелось бы, чтобы прошлая команда сохранялась, а следующая писалась уже на новой строке. В html за это отвечает тэг <br>, но в javascript я ньюби, поэтому не знаю как все это реализовывается.

P.S Команд будет не две и не три, их будет сотни, неужели нужно писать для каждой команды свой кусок кода или можно обойтись какой нибудь другой конструкцией? К примеру - switch. Но честно, я не знаю как перевести мой javascript код в конструкцию switch. Мне кажется, она сильно облегчит мне задачу :)

WorM32 30.07.2014 17:22 
input.value = ''; // очищение текущего значения инпута
el.innerHTML += 'новая строка' + '<br>'; // добавление новой строки

same4 30.07.2014 18:10
Спасибо большое. Но не могли бы вы мне подсказать, куда именно эти куски кода вставлять?

same4 31.07.2014 06:36
Проснулся - разобрался. Дело было в исходном коде. На сайт я его предоставил несколько изменив.

А вот насчет проблемы в 100 и более команд, может ответить мне кто нибудь? Неужели для каждой команды нужно писать весь этот код, или можно пойти другим путем?

Aetae 31.07.2014 07:26
WorM32, вы все достали с такими советами: 
el.innerHTML += 'новая строка' + '<br>';
Нельзя так делать, нельзя! foo += bar - это foo = foo + bar, перезапись всего содержимого.

same4,
Если я правильно понял, то делается то что вам надо примерно так:
<style>
.warning{color: red}
#main-output p{margin:0; padding:0}
</style>
<input type='text' id="main-input"><input type='button' id="main-button" value="go">
<div id="main-output"></div>

<script>
var input = document.getElementById('main-input'),
    button = document.getElementById('main-button'),
    output = document.getElementById('main-output');

function enterCommand(){
  if (input.value in commandList) commandList[input.value]();
  else out('Команда не существует', 'warning');
}

button.onclick = enterCommand;
  
var commandList = {
  test: function(){
    out('Просто тест')
  },
  test2: function(){
    out('Просто тест2')
  }
};

function out(msg, cls){
  var p = document.createElement('p');
  p.appendChild(document.createTextNode(msg));
  
  if(cls) p.className = cls;
  output.appendChild(p)
}
</script>


P.S. В js сообществе принято с заглавных букв писать только конструкторы.

same4 31.07.2014 07:47
Все, разобрался! Спасибо большое вам! Вы мне очень помогли! Возможно будут еще вопросы от меня, но я надеюсь их исправить сам. Если же нет - отпишусь тут.

same4 31.07.2014 08:15
Aetae,

У меня тут одна проблемка появилась..

При 

<div id="main-output"></div>


Все выходит супер, но проблема в том, что мне нужно выводить результат в 

<textarea> </textarea>


Естественно, чтобы появлялась полоса прокрутки, если введено много команд.

При использовании

<div id="main-output"></div>


после отправки порядка 10 команд, все это выходит за рамки положенного. Поэтому прошу помочь с отправкой результатов в 

textarea


P.S И еще.. В моем изначальном коде, при нажатии энтер команда автоматически отправлялась в форму. Пользовался командой

onclick = 'EnterCommand(); return false;'


Написана она была в HTML коде. Сейчас же она не работает. (Пытался подставлять в разные места return false; - толку 0)

WorM32 31.07.2014 08:52
Aetae,
И? Чем перезапись небольшого кусочка так плоха? Прошу аргументированный ответ с тестами производительности ;)

Aetae 31.07.2014 09:23
WorM32, Так просто делать не надо и всё. Нет никакого преимущества в том чтобы сделать так, зато потенциальных граблей и трудновылавливаемых багов - завались.

same4, Какие проблемы задать высоту?
<style>
.warning{color: red}
#main-output p{margin:0; padding:0}
#main-output {overflow:auto; height:100px;  direction:rtl; text-align:left}
</style>
<input type='text' id="main-input"><input type='button' id="main-button" value="go">
<div id="main-output"></div>
 
<script>
var input = document.getElementById('main-input'),
    button = document.getElementById('main-button'),
    output = document.getElementById('main-output');
 
function enterCommand(){
  if (input.value in commandList) commandList[input.value]();
  else out('Команда не существует', 'warning');
}
 
button.onclick = enterCommand;
   
var commandList = {
  test: function(){
    out('Просто тест')
  },
  test2: function(){
    out('Просто тест2')
  }
};
 
function out(msg, cls){
  var p = document.createElement('p');
  p.appendChild(document.createTextNode(msg));
   
  if(cls) p.className = cls;
  output.appendChild(p)
}
</script>

MallSerg 31.07.2014 09:25 
<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
	<style>
b {marginLeft:2pt;}
	</style>
</head>
<body>
<div id="first">test 1 </div>
<div id="second">test 2</div>
<script type="text/javascript">
   var f = document.getElementById("first");
   var s = document.getElementById("second");   var r;
 
var time1 = new Date().getTime();  
  for (i = 0 ; i < 1000; ++i){
	f.innerHTML += "<b>A da</b>";
  }
var time2 = new Date().getTime();
  
var time3 = new Date().getTime();  
  for (i = 0 ; i < 1000; ++i){
	r = document.createElement ("b");
	r.innerHTML = "A da";
	s.appendChild (r);
  }
var time4 = new Date().getTime();    

alert ("(innerHTML +=)милисек = " + (time2 - time1) );
alert ("(appendChild)милисек = " + (time4 - time3) );
alert ("коффицент" + ((time2 - time1) / (time4 - time3)) );
</script>
</body>
</html>

WorM32 31.07.2014 09:36
MallSerg,
не-не-не, я никогда бы не стал в цикле использоваться конструкцию с el.innerHTML += 'бла бла бла';

Если на вашем примере, то было бы так:
<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
	<style>
b {marginLeft:2pt;}
	</style>
</head>
<body>
<div id="first">test 1 </div>
<div id="second">test 2</div>
<script type="text/javascript">
   var f = document.getElementById("first");
   var s = document.getElementById("second");   var r;
 
var html = f.innerHTML;
var time1 = new Date().getTime();  
  for (i = 0 ; i < 1000; ++i){
	html += "<b>A da</b>";
  }
f.innerHTML = html;
var time2 = new Date().getTime();
  
var time3 = new Date().getTime();  
  for (i = 0 ; i < 1000; ++i){
	r = document.createElement ("b");
	r.innerHTML = "A da";
	s.appendChild (r);
  }
var time4 = new Date().getTime();    

alert ("(innerHTML +=)милисек = " + (time2 - time1) );
alert ("(appendChild)милисек = " + (time4 - time3) );
alert ("коффицент" + ((time2 - time1) / (time4 - time3)) );
</script>
</body>
</html>

Aetae 31.07.2014 09:46
WorM32, ты бы не стал. А те, кому ты советы даёшь без пояснений - стали бы. Потому хотябы в ответах новичкам воздержись от этого дерьма.

WorM32 31.07.2014 09:56
Aetae,
Простите, но пояснения, что "нужно использовать только appendChild и всё, писец!" - я тоже не увидел) Так что в данном случае ваш совет ничем не лучше моего.

А вообще нужно уметь пользоваться разными инструментами, в зависимости от конкретной ситуации, но это придет только с опытом.

MallSerg 31.07.2014 10:03
WorM32,
Ты лукавишь речь шла про то что « .innerHTML += » это писец
а ты переврал и убрал эту конструкцию из своего теста и пытаешься всех обмануть.
Не нада так делать.

Нужно просто признать что « .innerHTML += » именно в таком сочетании это писец ад и погибель

WorM32 31.07.2014 10:23
MallSerg,
Простите, где это я из своего теста убрал полный ребилд элемента? Ведь именно в этом и был смысл нашего спора с Aetae.

Конструкции
var html = el.innerHTML;
html += '<b>bla</b>';
el.innerHTML = html;
и
el.innerHTML += '<b>bla</bla>';
Являются идентичными! И делают полный ребилд элемента el.

Про то что el.innerHTML += 'bla' можно использовать в цикле я нигде не говорил, и у ТСа в описании проблемы тоже не было никаких циклов. Так что не надо фантазировать и подгонять тесты под свои фантазии.

same4 31.07.2014 10:56
Aetae,

Спасибо большое, вы сделали мой день. И да, вы может упустили момент, но мне нужно отправлять текст по нажатию на enter, сейчас же страница тупо обновляется.

Да, спасибо всем, кто помог мне в решении проблемы. Все ваши ответы послужат мне уроком :)

В моем случае, код - Aetae был тем, что мне нужно.

MallSerg 31.07.2014 11:00
Цитата:
Сообщение от same4
В моем случае, код - Aetae был тем, что мне нужно.
халявой?

same4 31.07.2014 11:03
Цитата:
Сообщение от MallSerg (Сообщение 323558)
халявой?
Да, правильно подмечено.

WorM32 31.07.2014 11:08
Rise,
<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
	<style>
b {marginLeft:2pt;}
	</style>
</head>
<body>
<div id="first">test 1 <b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b><b>A da</b></div>
<div id="second">test 2</div>
<script type="text/javascript">
   var f = document.getElementById("first");
   var s = document.getElementById("second");   var r;
 
var html = f.innerHTML;
var time1 = new Date().getTime();  
  for (i = 0 ; i < 1000; ++i){
	html += "<b>A da</b>";
  }
f.innerHTML = html;
var time2 = new Date().getTime();
  
var time3 = new Date().getTime();  
  for (i = 0 ; i < 1000; ++i){
	r = document.createElement ("b");
	r.innerHTML = "A da";
	s.appendChild (r);
  }
var time4 = new Date().getTime();    

alert ("(innerHTML +=)милисек = " + (time2 - time1) );
alert ("(appendChild)милисек = " + (time4 - time3) );
alert ("коффицент" + ((time2 - time1) / (time4 - time3)) );
</script>
</body>
</html>


Еще вопросы?

WorM32 31.07.2014 11:29
Цитата:
Сообщение от Rise (Сообщение 323566)
Что это? Тест сложения строк?
это ответ на
Цитата:
Сообщение от Rise (Сообщение 323552)
У ТС при добавлении команд будет увеличиваться содержимое элемента output, при innerHTML браузеру с каждым разом придется извлекать(преобразовать dom в строку), создавать заново(строку в dom) структуру содержимого из большего числа элементов.
И тест показывает, что для конкретного случая, прироста производительности от использования appendChild нет!

MallSerg 31.07.2014 11:38
... не нужно 1000 раз сложить строку
... нужно 1000 раз изменить элемент добавляя новые элементы в конец
в случае с innerHTML элемент будет пересоздаваться 1000 раз
в случае appendChild ....
все все знают но некоторые упираются ... =)

melky 31.07.2014 11:41
Цитата:
Сообщение от MallSerg
в случае с innerHTML элемент будет пересоздаваться 1000 раз
в случае appendChild ....
докажи :victory: на примере консольки хрома или IE11

Цитата:
Сообщение от MallSerg
все все знают но некоторые упираются ... =)
угумс. но браузеры на месте то не стоят

MallSerg 31.07.2014 12:05
Цитата:
Сообщение от melky
угумс. но браузеры на месте то не стоят
браузеры это программы исполняемые на компьютерах они не могут стоять в принципе =)

same4 31.07.2014 13:39
Цитата:
Сообщение от Rise (Сообщение 323560)
same4,
<form name="cmd">
    <input name="input">
    <textarea name="output"></textarea>
</form>

<script>
document.cmd.onsubmit = function(){
    //this.input.value 
    //this.output.value
    return false;
};
</script>
Спасибо за ответ, но у меня что-то никак не хочет работать этот код.

Да и к тому же у меня и без textarea код работает хорошо с div (спасибо Aetae)

MallSerg 31.07.2014 14:29
Цитата:
Сообщение от melky
Сообщение от MallSerg
в случае с innerHTML элемент будет пересоздаваться 1000 раз
в случае appendChild ....
докажи на примере консольки хрома или IE11
 
<div id="first"><a id="ele">Известно</a></div>
	<form name="frm">
		<input type="button" name="b1" value=".innerText +=" />
		<input type="button" name="b2" value=".appendChild" />
	</form>
<script type="text/javascript">
	var f = document.getElementById ("first"); 
document.frm.b1.onclick = function (){
// показывает что все элементы внутни f создаются заного 
	var first = document.getElementById ("ele");	
		f.innerHTML += "<a> + добавка</a>";
	var second = document.getElementById ("ele");
		alert ( (first === second) ); 
}
document.frm.b2.onclick = function (){
// ссылка неизменна показывает что все элементы внутни f остались прежними 
	var a = document.createElement('a');
		a.innerHTML = "<a> + добавка</a>";
	var first = document.getElementById ("ele");	
		f.appendChild(a);
	var second = document.getElementById ("ele");
		alert ( (first === second) );
}
</script>


Часовой пояс GMT +3, время: 19:32.