Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > document.write или document.createElement?

Автор: Silwester 9.7.2007, 15:00

Всем добрый день,
Подскажите пожалуйста, что лучше использовать для добавления новых узлов в HTML
Способ через document.write

Код


function Append_d_write()
{
 document.write("<TABLE><TBODY><TR><TD>Ячейка1</TD><TD>Ячейка2</TD></TR></TBODY></TABLE>")
}

или через document.createElement и AppendChild

Код


//то же самое
function AppendChild()
{
 var Table=document.createElement('TABLE');
 var TBody=document.createElement('TBODY');
 var Row=document.createElement('TR');
 var Cell1=document.createElement('TD');
 var Cell2=Cell1.cloneNode();
 Row.appendChild(Cell1);
 Row.appendChild(Cell2);
 Table.appendChild(TBody);
 TBody.appendChild(Row);
 document.body.appendChild(Table);
 Cell1.appendChild(document.createTextNode('Ячейка 1'));
 Cell2.appendChild(document.createTextNode('Ячейка 2'));
}

?
Т.е. есть ли какие-либо преимущества(например, для меня - 1-й намного удобней)/недостатки для обоих случаев, желательно с профессиональной точки зрения. В любом случае интересно мнение каждого.

И вторая часть вопроса:
Эти функции я загружаю в документ так

Код


window.onload=Append_d_write()

почему браузер выдает ошибку на этой строчке с формулировкой
Не поддерживается
?
(хотя при этом загружает страницу)

Заранее благодарен.

Автор: stup 9.7.2007, 15:42

Используйте тот способ, который Вам более удобен в данной ситуации. Первый способ быстрее, но второй предоставляет больший контроль над создаваемыми элементами.

Ошибка выдается, потому что у функции создания элементов через DOM у Вас название неправильное smile

Кроме этого, вместо

Код


window.onload=Append_d_write()

пишите

Код


window.onload=Append_d_write;

В первом случае Вы присваиваете window.onload результат, который возвращает функция Append_d_write, а во втором ссылаетесь на нее.

Автор: Silwester 9.7.2007, 15:59

А когда необходимо передать этой функции параметры - как поступить?

Насчет неправильного названия - а какое будет правильным?)

Автор: stup 9.7.2007, 16:04

Код


window.onload=Append_d_write;

Код


function AppendChild()

Работать вместе не будут smile

Насчет параметров - опишите ситуацию подробней, не понятно, что Вы имеете ввиду.

Автор: Silwester 9.7.2007, 16:15

Это понятно))
Пусть у меня будет функция

function f(k)
{
alert(k);
}

и я захочу сделать ее onload(простенький, ничего не подразумевающий пример)
и напишу

window.onload=f

откуда она будет знать с каким параметром ей запуститься

в то же время

window.onload=f(1)

работать не будет, т.к. ...не будет

Так вот и вопрос - как передать параметр(ы) для функции, которая должна быть запущена onload?

Автор: stup 9.7.2007, 16:25

Вот Вы и подошли к самой сути JavaScript smile

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

Код



img = document.getElementById("someId");
img.someMyParameter = "1";

img.onclick = onClickListener;

function onClickListener () {
     alert(this.someMyParameter);
}

Если параметров много, то их лучше заворачивать в какой нибудь класс ParameterWrapper.
Обратите внимание на слово this. И еще советую почитать http://forum.vingrad.ru/forum/topic-32350.html

Автор: Zeroglif 9.7.2007, 16:51

Цитата(Silwester @ 9.7.2007, 17:15

)

как передать параметр(ы) для функции, которая должна быть запущена onload

Код


onload = function () { f(k) };

Автор: stup 9.7.2007, 18:33

Тогда this не пашет :(

Автор: Zeroglif 9.7.2007, 20:44

Цитата(stup @ 9.7.2007, 19:33

)

Тогда this не пашет

A зачем там this, для onload окна-то? smile

Да и передать можно this аргументом.

Автор: Silwester 10.7.2007, 11:03

Спасибо, оба тспособа действительно годятся

Еще по первой части вопроса

Вот используемый пример:

Код


<html>
<STYLE>

  #container {
   position: absolute;
   left: 50%;
   width: 950px;
   margin-left: -475px;
   background-image:url('or\map_1.jpg');
   background-position: 50% 40%
   }
</STYLE>

<script>
window.onload=function(){AppendChild(1)}

function AppendChild(k)
{
 
 var Div=document.createElement('div');
 newatt=document.createAttribute("id");
 newatt.value="container";
 Div.setAttributeNode(newatt);


 var Table=document.createElement('TABLE');
 var TBody=document.createElement('TBODY');
 var Row=document.createElement('TR');
 var Cell1=document.createElement('TD');
 var Cell2=Cell1.cloneNode();
 Row.appendChild(Cell1);
 Row.appendChild(Cell2);
 Div.appendChild(Table);
 Table.appendChild(TBody);
 TBody.appendChild(Row);
 document.body.appendChild(Div);
 Cell1.appendChild(document.createTextNode('Ячейка 1'));
 Cell2.appendChild(document.createTextNode('Ячейка 2'));
}


function Append_d_write(k)
{
 alert(k);
 document.write("<div id='container'><TABLE><TBODY><TR><TD>Ячейка1</TD><TD>Ячейка2</TD></TR></TBODY></TABLE></div>");
} 
 
</script>
<body>
</body>
</html>

Вопрос: почему AppenChild выводит результат с background, то есть как положено, а Append_d_write background не выводит, а выводит результат с белым фоном, то есть div как будто не действует?
В тоже время если запустить ф-ю Append_d_child неправильно)):

Код


window.onload=Append_d_write(1)

браузер выдаст ошибку, но результат будет и будет с background!?!

Автор: Zeroglif 10.7.2007, 12:02

Ты просто не до конца разобрался с методом write(). Упрощённо говоря, он или пишет в поток (пока страница ещё грузится/поток не закрыт), или при уже закрытом потоке разрушает текущий документ и всё пишет в новый.

Когда ты вызываешь document.write() после загрузки (по событию onload), текущий документ сначала разрушается и аргументы метода пишутся уже с чистого листа. Отсюда ты не видишь никаких стилей.

Когда же ты справа от onload ставишь не функцию, а сразу вызов, то безотносительно к событию функция будет вызвана в потоке (во время загрузки) тогда, когда до строчки вызова дойдёт интерпретатор. Отсюда предыдущий документ живёт, в том числе и его стили, а в него спокойно дописываются аргументы метода write().

Автор: stup 10.7.2007, 14:19

Цитата(Zeroglif @ 9.7.2007, 20:44

)

A зачем там this, для onload окна-то? smile Да и передать можно this аргументом.

Для onload - никакого. Для других - иногда хочется и this и параметры отдельно smile

Автор: Silwester 10.7.2007, 15:22

Ok спасибо