appendChild(), removeChild() | Javascript

• Удалить элемент
• Создать тег
• Создать текст
• Переместить элемент
• Сделать копию элемента
• Запретить повторный onclick
• Как создать элемент, а потом его же удалить
• В чём отличие innerHTML от appendChild(), removeChild()
• Смена текста JavaScript
• JavaScript: изменение CSS

Важно: событие не сработает, если количество элементов в 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 применить не удастся. Пример использования: раз, два.

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