Javascript-форум - Проблема с добавлением элементов в DIV (appendChild)

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Проблема с добавлением элементов в DIV (appendChild) (https://javascript.ru/forum/events/27644-problema-s-dobavleniem-ehlementov-v-div-appendchild.html)

Проблема с добавлением элементов в DIV (appendChild)

Есть документ вида:

<div id="cont"></div>

<script language="javascript">function test1(){
	var test1_cont = document.getElementById('cont');
	var test1_div = document.createElement('div');
	test1_div.innerHTML = 'test 1 <br>';
	test1_cont.appendChild(test1_div);
}
window.onload = function (){ test1();}
</script>
 
<script language="javascript">function test2(){
 	var test2_cont = document.getElementById('cont');
 	var test2_div = document.createElement('div');
 	test2_div.innerHTML = 'test 2 <br>';
 	test2_cont.appendChild(test2_div);
 }
 window.onload = function (){ test2();}
 </script>

Проблема в том, что в слой добавляется содержимое из 2-й функции.
Почему 1-я не выполняется?
Что делать?

PS Запихнуть все это в одну функцию крайне проблематично, т.к. код генерируется из PHP файла, и придется много переделывать.

потому что когда Вы делаете второе присвоение обработчика событию window.onload, в частности

window.onload = function (){ test2();}

то первое присвоение

window.onload = function (){ test1();}

умирает. Поробуйте так:

window.onload = function (){test1(); test2();}

Цитата:

Сообщение от Маэстро (Сообщение 170049)

потому что когда Вы делаете второе присвоение обработчика событию window.onload, то первое присвоение умирает.

Об этом то я и не подумал :thanks:

Цитата:

Сообщение от Маэстро (Сообщение 170049)

Поробуйте так:

window.onload = function (){test1(); test2();}

Так сделать будет сложно, т.к. сколько будет функций заранее не известно.
Пробовал так:

<script language="javascript">function test1(){
	var test1_cont = document.getElementById('cont');
	var test1_div = document.createElement('div');
	test1_div.innerHTML = 'test 1 <br>';
	test1_cont.appendChild(test1_div);
}
if(window.funcname === undefined){ window.funcname = "test1();" }else{ window.funcname += " test1();"}
window.onload = function (){ window.funcname;}
</script>
 
<script language="javascript">function test2(){
 	var test2_cont = document.getElementById('cont');
 	var test2_div = document.createElement('div');
 	test2_div.innerHTML = 'test 2 <br>';
 	test2_cont.appendChild(test2_div);
 }
if(window.funcname === undefined){ window.funcname = "test2();" }else{ window.funcname += " test2();"}
window.onload = function (){ window.funcname;}
 </script>

<div id="cont"></div>

Нот так тоже не работает.
Может еще какие идеи есть?

Извините, но тут написано столько ерунды, что её трудно комментировать. Вы пытаетесь складывать функции с текстами функций, а запускать на выполнение не функцию а её текст...
Для начала Вам надо четко различать, в чем разница написания трёх вариантов:

function test1(){
    //var test1_cont = document.getElementById('cont');
	var test1_div = document.createElement('div');
	test1_div.innerHTML = 'test 1 <br>';
    //test1_cont.appendChild(test1_div);
}
alert('1: ' + "test1();"  );
alert('2: ' + test1  );
alert('3: ' + test1()  );

Нет смысла писать по тексту несколько раз window.onload = ...
Вот такой вариант устроит?

<script language="javascript">
var ind   = 0;
var funcs = [];
</script>  
  
<script language="javascript">function test1(){
	var test1_cont = document.getElementById('cont');
	var test1_div = document.createElement('div');
	test1_div.innerHTML = 'test 11 <br>';
	test1_cont.appendChild(test1_div);
}
funcs[ind] = test1; ind++;
</script>

 
<script language="javascript">function test2(){
 	var test2_cont = document.getElementById('cont');
 	var test2_div = document.createElement('div');
 	test2_div.innerHTML = 'test 22 <br>';
 	test2_cont.appendChild(test2_div);
 }
funcs[ind] = test2; ind++;
</script>


<script language="javascript">
  //alert(funcs);
window.onload = function (){for (var i=0; i < ind; i++) funcs[i]()};
</script>  

<div id="cont"></div>

Цитата:

Сообщение от Маэстро (Сообщение 170083)

Нет смысла писать по тексту несколько раз window.onload = ...

Это понятно, но избавится от этого сложно...

Цитата:

Сообщение от Маэстро (Сообщение 170083)

Вот такой вариант устроит?

Не совсем, т.к. эти скрипты генерируются одной функцией, в зависимости от входных параметров. И функция генерирующая их может запускаться несколько раз, а может и вообще не запускаться. По этому сложно избавится от использования window.onload несколько раз, и в начале отдельно записать

var ind   = 0;
var funcs = [];

Но идея помогла! :thanks:

Сделал так:

<script language="javascript">function test1(){
	var test1_cont = document.getElementById('cont');
	var test1_div = document.createElement('div');
	test1_div.innerHTML = 'test 1 <br>';
	test1_cont.appendChild(test1_div);
}
if(window.funcname === undefined){ 
	window.funcname = new Array(test1)
}else{ 
	window.funcname.push(test1)
}
window.onload = function (){ 
	for(var i = 0; i < window.funcname.length; i++){
		window.funcname[i]()
	}
}
</script>
 
<script language="javascript">function test2(){
 	var test2_cont = document.getElementById('cont');
 	var test2_div = document.createElement('div');
 	test2_div.innerHTML = 'test 2 <br>';
 	test2_cont.appendChild(test2_div);
 }
if(window.funcname === undefined){ 
	window.funcname = new Array(test2)
}else{ 
	window.funcname.push(test2)
}
window.onload = function (){ 
	for(var i = 0; i < window.funcname.length; i++){
		window.funcname[i]()
	}
}
 </script>

<div id="cont"></div>

а не проще ли переписать ту самую жуткую теневую функцию, которая создает эти скрипты таким образом, чтобы она не шлепала их десятками, а выдала один, который сделает все, что написано в данных скриптах, разом. и потом один же window.onload? например, пускай она выдаст массив значений, которые надо вписать в document.getElementById('cont') и циклом их туда внесет. действительно, бред какой-то