Задать вопрос
@farpram
javascript

Почему не работает replaceWith?

При выполнении нижеуказанного кода выдаёт ошибку "Uncaught TypeError: box[i].replaceWith is not a function". Почему?

<html>
<head>
	<meta charset="utf-8">
</head>

<body>
	<div class="box">1</div>
	<div class="box">2</div>
	
	<script>
		var a = document.createElement('a');
		a.href = '#';
		a.innerHTML = 'links';
		
		var box = document.getElementsByClassName('box');
		
		for(var i = 0, count = box.length; i < count; i++) {
			box[i].replaceWith(a);
		}
	</script>
</body>
</html>


или каким иным способом можно заменить <div class="box">1</div>и т.п. на ссылку?
  • Вопрос задан
  • 969 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 2
@amatory10
как я понял replaceWith метод относится к Jquery, в js нет такого метода.
Ответ написан
23 комментария
23 комментария
In4in
@In4in
°•× JavaScript Developer ^_^ ו°
1. Один и тот же элемент не может быть в нескольких местах!
2. getElementsByClassName - живая выборка. Когда вы заменяете один элемент на другой, он исчезает из DOM и, соответственно, из box.

/* box = getElementsByClassName("box"); */
 while(box.length) {
   box[0].replaceWith(a.cloneNode());
 }

/* 
  Или можно сделать так: 
  box = document.querySelectorAll(".box"); 
*/
for(var i = 0; i < box.length; i++) {
   box[i].replaceWith(a.cloneNode());
}


3. replaceWith еще не поддерживается современными браузерами, необходим поллифил. Надеюсь, вы это знаете.

Element.prototype.replaceWith = function(e){
    this.parentNode.insertBefore(e, this);
    this.remove();
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack-разработчик PHP/JavaScript
LegalIndonesia
от 3 000 до 3 000 $
Бэкэнд-разработчик JavaScript
Wanted. • Москва
от 250 000 до 400 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Верстка макета из Figma на WordPress
04 янв. 2025, в 22:38
10000 руб./за проект
Сделать 250 картинок
04 янв. 2025, в 22:36
20000 руб./за проект
Помощь по Kotlin Android
04 янв. 2025, в 21:58
1000 руб./за проект
Ещё заказы