appendChild(), removeChild() | Javascript — Примеры

appendChild(), removeChild() | Javascript

Важно: событие не сработает, если количество элементов в NodeList было изменёно.

<div id="raz10"><input type="button" value="Нажать"></div>

<script>
var div = document.querySelector('#raz10');
    input = div.childNodes;
input[0].onclick = function() {
  alert('Не работает');
}
div.innerHTML += '<input type="button" value="Я вновь созданный">';
</script>
<div id="raz10"><input type="button" value="Нажать"></div>

<script>
var div = document.querySelector('#raz10');
    input = div.childNodes;
div.innerHTML += '<input type="button" value="Я вновь созданный">';
input[0].onclick = function() {
  alert('Работает');
}
</script>

Как удалить элемент на JavaScript

При клике на нём же:
<button onclick="this.parentNode.removeChild(this);">Вариант 1</button>
<button onclick="this.remove();">Вариант 2</button>
<button onclick="this.outerHTML='';">Вариант 3</button>

Как добавить тег HTML

<style>
#raz div {
  transition: 3s;
  opacity: 0;
}
</style>

<div id="raz">
  <input type="button" value="Добавить">
</div>

appendChild() в конец

<script>
document.querySelector('#raz input').onclick = function() {
  var theDiv = document.createElement('div');  // создать новый тег div
  theDiv.innerHTML = 'HTML-содержимое';  // его содержимое
  this.parentNode.appendChild(theDiv);  // поместить новый тег последним в div с id="raz" (вместо this.parentNode может быть любой другой элемент DOM)
  getComputedStyle(theDiv).opacity;
  theDiv.style.opacity = '1';
}
</script>

insertBefore() в начало

<script>
document.querySelector('#raz input').onclick = function() {
  var theDiv = document.createElement('div');
  theDiv.innerHTML = 'HTML-содержимое';
  this.parentNode.insertBefore(theDiv, this.parentNode.firstChild);  // поместить новый тег первым в div с id="raz"
  getComputedStyle(theDiv).opacity;
  theDiv.style.opacity = '1';
}
</script>

insertBefore() после конкретного элемента

<script>
document.querySelector('#raz input').onclick = function() {
  var theDiv = document.createElement('div');
  theDiv.innerHTML = 'HTML-содержимое';
  this.parentNode.insertBefore(theDiv, this.nextSibling);
  getComputedStyle(theDiv).opacity;
  theDiv.style.opacity = '1';
}
</script>

insertBefore() до указанного элемента

<script>
document.querySelector('#raz input').onclick = function() {
  var theDiv = document.createElement('div');
  theDiv.innerHTML = 'HTML-содержимое';
  this.parentNode.insertBefore(theDiv, this.previousSibling);
  getComputedStyle(theDiv).opacity;
  theDiv.style.opacity = '1';
}
</script>

innerHTML внутри элемента (взять содержимое в новый тег)

<style>
#raz8 span {
  display: inline-block;
  padding: 3px;
  border: 1px solid;
}
</style>

<button type="button" id="raz8">новый тег внутри</button>

<script>
(function(){
var i = 1;
document.querySelector('#raz8').onclick = function() {
  this.innerHTML = '<span style="border-color: rgba(255,0,0,'+i+');">'+this.innerHTML+'</span>';
  i = i - 0.1;
}
})()
</script>

Если есть события JS на тегах внутри элемента, то можно как тут

  1. создать нового потомка,
  2. переместить во вновь созданного потомка всех остальных потомков.

replaceChild(newChild, oldChild) снаружи элемента (окружить новым тегом)

<style>
.raz9 {
  display: inline-block;
  padding: 3px;
  border: 1px solid rgba(255,0,0,0);   
  transition: 3s;
}
</style>

<button type="button" id="raz9">новый тег снаружи</button>

<script>
document.querySelector('#raz9').onclick = function() {
  var theSpan = document.createElement('span');
  theSpan.setAttribute('class', 'raz9');
  this.parentNode.replaceChild(theSpan, this);  // заменить текущий элемент на созданный
  theSpan.appendChild(this);  // содержимое созданного элемента будет текущий элемент
  getComputedStyle(theSpan).borderTopColor;
  theSpan.style.borderColor = 'rgba(255,0,0,1)';
}
</script>

Как добавить текст

Вместо document.createElement(tagName) использовать document.createTextNode(text). Так же и с insertBefore().

<div id="raz7">
  <input type="button" value="Добавить текст">
</div>

<script>
(function(){
var i = 1;
document.querySelector('#raz7 input').onclick = function() {
  var theText = document.createTextNode(' текст'+i);
  this.parentNode.appendChild(theText);
  i++;
}
})()
</script>

Как переместить элемент

Отличие в том, что элемент уже существует. Так же и с insertBefore().

<style>
#raz5, #raz6 {
  height: 50px;
  padding: 5px;
}
#raz5 {
  background: green;
}
#raz6 {
  background: blue;
}
</style>

<div id="raz5">
  <input type="button" value="Перенести в синий прямоугольник">
</div>
<div id="raz6"></div>

<script>
document.querySelector('#raz5 input').onclick = function() {
  document.querySelector('#raz6').appendChild(this);
}
</script>

Как скопировать (клонировать) элемент

Сделать дубликат кода с помощью cloneNode(true|false)

<button type="button" class="raz1">1</button><button type="button" class="raz1">2</button>

<script>
Array.prototype.slice.call(document.querySelectorAll('.raz1')).forEach(function(a, index, all) {
  a.addEventListener('click', function() {
    var theI = a.cloneNode(true);
    a.parentNode.insertBefore(theI, a.nextSibling);
    alert(index+1+' из '+all.length);
  }, false);
})
</script>

Как запретить повторный onclick

<input type="button" value="Добавить после input" id="dobavit">

<script>
document.querySelector('#dobavit').onclick = function() {
  theDiv = document.createElement('div');
  theDiv.innerHTML = 'содержащий текст';
  this.parentNode.insertBefore(theDiv, this.nextSibling);
  this.onclick = null;
}
</script>

Как создать элемент, а потом его же удалить

Пример взят отсюда.

<input type="button" value="Новый CSS" onclick="include('on')">
<input type="button" value="Старый CSS" onclick="include('off')">

<script>
var include = (function(){
   return function (status){
     if(status == 'on'){  // если include('on')
       theStyle = document.createElement('style');  // создать новый тег style
       theStyle.innerHTML = 'body {background: DarkSalmon;}';
       document.querySelector('head').appendChild(theStyle);  // тег style поместить в конец head
     }else{
       theStyle.parentNode.removeChild(theStyle);  // удалить созданный тег style
     }
   }
})();
</script>

В чём отличие innerHTML от appendChild(), removeChild()

innerHTML меняет всё содержимое тега.

<input type="button" value="Новый CSS" onclick="include1('on')">
<input type="button" value="Попытка вернуть старый CSS" onclick="include1('off')">
<input type="button" value="Перезагрузить страницу" onclick="location.reload();">

<script>
var include1 = (function(){
   return function (status){
     if(status == 'on'){ // если include1('on')
       document.querySelector('head').innerHTML = '<style>body {background: DarkSalmon;}</style>'; // сменить содержимое тега head на прописанное в кавычках
     }else{ // иначе
       document.querySelector('head').innerHTML = '';
     }
   }
})();
</script>

Можно с помощью .replace и регулярных выражений добиться нужного результата:

<input type="button" value="Новый CSS" onclick="include2('on')">
<input type="button" value="Старый CSS" onclick="include2('off')">

<script>
var include2 = (function(){
   return function (status){
     if(status == 'on'){
       document.querySelector('head').innerHTML = document.querySelector('head').innerHTML.replace(/$/g, '<style class="newStyle">body {background: DarkSalmon;}</style>');
     }else{
       document.querySelector('head').innerHTML = document.querySelector('head').innerHTML.replace(/<style class="newStyle">[\s\S]*?<\/style>/g, '');
     }
   }
})();
</script>

Или чтобы изначально в HTML был пустой тег

<style class="nStyle"></style>

<input type="button" value="Новый CSS" onclick="include3('on')">
<input type="button" value="Старый CSS" onclick="include3('off')">

<script>
var include3 = (function(){
   return function (status){
     if(status == 'on'){
       document.querySelector('style.nStyle').innerHTML = 'body {background: DarkSalmon;}';
     }else{
       document.querySelector('style.nStyle').innerHTML = '';
     }
   }
})();
</script>

Кто медленнее? innerHTML быстрее работает в Firefox, W3C DOM - в Хроме (анализ). IE везде отстающий, но с W3C DOM у него намного хуже (анализ).

Кстати, есть ещё самый резвый document.write. Он выводит содержимое после тега script во время загрузки страницы. То есть никаких onclick применить не удастся. Пример использования: раз, два.

Поддержка браузерами.

в f t
наверх ↑

4 комментария:

Фируза Салихова
Можно ли привести пример на js: записи (добавление), изменение и удаление данных с БД. И также данный результат показать уже в другом окне. Также при каждом действии изменении данных запрашивать авторизацию. Заранее спасибо
NMitra
Сожалею, с БД ещё не работала.
Анонимный
Здравствуйте, Наталья!

Спасибо за очередную шпору.

Также подтверждаю интерес к статьям по работе JS с базами данных (MySQL & MongoDB).
Конечно, понятно, что это уже не front-end, но можно будет потихоньку приближаться к обучение по разработке SPA.

:)
NMitra
Здравствуйте, угу, я плевалась когда написала про форму обратной связи на PHP. Сразу вопросы, по которым я ничегошеньки не знала. Разобраться-разобралась, но долго очень как-то. А тут мне даже страшно подумать :)))