Javascript-форум - Функция не позволяет остаться элементу на странице. Почему?

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

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Функция не позволяет остаться элементу на странице. Почему? (https://javascript.ru/forum/misc/23036-funkciya-ne-pozvolyaet-ostatsya-ehlementu-na-stranice-pochemu.html)

Функция не позволяет остаться элементу на странице. Почему?

В этом разделе учебника http://beta.javascript.ru/tutorial/modifying-document есть такой код. Это добавление элемента на страницу.

<body>
<div>
  ...
</div>

<script>

  var parentElem = document.body.children[0];

  var newDiv = document.createElement('div');
  newDiv.innerHTML = 'Привет, мир!';

parentElem.insertBefore(newDiv, parentElem.firstChild);

</script>
</body>

Так, как написан, он работает как надо. Но если его оформить в функцию, то добавленный элемент появляется и тут же пропадает. Будто страница загружается заново. Почему? Функция как-то влияет? Код такой:

<body>

<div>
  ...
</div>

<script>

function f() {

  var parentElem = document.body.children[0];

  var newDiv = document.createElement('div');
  newDiv.innerHTML = 'Привет, мир!';

parentElem.insertBefore(newDiv, parentElem.firstChild);
}

</script>

<a href="" onclick="f()">Нажать</a>

</body>

Цитата:

Сообщение от jsuse

<a href="" onclick="f(); return false;">Нажать</a>

Происходит переход по ссылке

return false надо разместить в конце функции f.

function f() {

  var parentElem = document.body.children[0];

  var newDiv = document.createElement('div');
  newDiv.innerHTML = 'Привет, мир!';

  parentElem.insertBefore(newDiv, parentElem.firstChild);

  return false;

}

Разница в чём?!

Так красивее ))

Цитата:

Сообщение от DjDiablo (Сообщение 135488)

Так красивее ))

Что интересно, разница есть. Работает, когда именно вот так:

<a href="" onclick="f(); return false;">Нажать</a>

А когда вставляешь в саму функцию в конце, то не работает, опять перегружается. С чем это может быть связано?

если в функции, то вот так
<a href="" onclick="return f();">Нажать</a>

Цитата:

Сообщение от jsuse (Сообщение 135503)

Что интересно, разница есть. Работает, когда именно вот так:

<a href="" onclick="f(); return false;">Нажать</a>

...

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

Цитата:

Сообщение от Pavel M.

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

Могут скрипты потыбзить? :blink: