162

Я шукаю замінити елемент у DOM.
Наприклад, є <a>елемент, який я хочу замість <span>цього замінити .

Як би я пішов і зробив це?

javascript dom

9

target.replaceWith(element);це сучасний (ES5 +) спосіб зробити це

— Гібольт

2

@Gibolt Що таке специфікація DOM з ES? Більше того, він ще не є частиною стандарту DOM, тоді як ES5 був випущений 9 років тому.

— пішпіш

ES5 + означає ES5 АБО Пізніше. Навіть якщо ES5 вже 9 років, пізніші версії НЕ такі старі.

— JustinCB

Якщо ви все ще використовуєте StackOverflow, варто вибрати нову стандартну відповідь нижче.

— mikemaccana

202

використовуючи substituChild () :

<html>
<head>
</head>
<body>
  <div>
    <a id="myAnchor" href="http://www.stackoverflow.com">StackOverflow</a>
  </div>
<script type="text/JavaScript">
  var myAnchor = document.getElementById("myAnchor");
  var mySpan = document.createElement("span");
  mySpan.innerHTML = "replaced anchor!";
  myAnchor.parentNode.replaceChild(mySpan, myAnchor);
</script>
</body>
</html>

— Бьорн
джерело

7

цей приклад не працює. Ви повинні поставити блок сценарію в кінці тіла, щоб він працював. Крім того, просто для розваги: спробуйте додати рядок [сигнал (myAnchor.innerHTML)] після операції.

— KooiInc

Існує орфографічна помилка з StackOverflow в якорі внутрішнього Тексту

— rahul

8

Що робити, якщо це елемент html-корінця

— lisak

Дякую @Bjorn Tipling. Я створив стежити за питання про те , як додати ідентифікатор і функцію заміненого елемента, тут: stackoverflow.com/questions/15670261 / ...

— JDelage

65

var a = A.parentNode.replaceChild(document.createElement("span"), A);

a - замінений елемент A.

— Камарей
джерело

1

Відповідь від @Bjorn Tipling насправді не працює. Це (правильна!) Відповідь для KooiInc, також правильний, коментар. Тепер це працює! ;-) Tx обом!

— Педро Феррейра

4

напевно, ви могли придумати назву змінної, крім A lol

— quemeful

61

`A.replaceWith(span)` - Батьків не потрібно

Родова форма:

target.replaceWith(element);

Шлях краще / чистіше, ніж попередній метод.

Для вашого випадку використання:

A.replaceWith(span);

Документи Mozilla

Підтримувані браузери - 94% квітня 2020 року

— Гібольт
джерело

13

Не підтримується в IE11 або Edge 14 (зараз: 2016-11-16).

— jor

3

Спробуйте використовувати закриття Google або інший транспілятор для перетворення в ES5. Ви не повинні писати старий код на основі підтримки браузера, якщо у вас є кращий, більш ремонтопрігоден варіант

— Gibolt

1

Таким чином трансліпуючи. Ви можете оптимізувати, мінімізувати та конвертувати все в одне ціле. Перевірте це: developers.google.com/closure/compiler

— Gibolt

4

Я думаю, що якщо вибір вибирається між кодом використання, який працює у всіх браузерах, які я намагаюся підтримати, або переінструментую весь ваш процес збирання для використання закриття, я вибрав би код використання, який працює у всіх браузерах, які я намагаюся підтримати. .

— cdmckay

5

@jor Я якось погоджуюся підтримувати якомога більше браузерів, але я відмовляюсь перекроювати свій код лише тому, що IE або Edge є неповними або просто "хочу бути іншим". Є стандарти, якщо вони не дотримуються їх, і мало хто їх підтримує, то це їхня проблема, яка не повинна впливати на нас як веб-розробників.

— Девід Табернеро М.

4

Це питання дуже старе, але я опинився, що навчався на сертифікацію Microsoft, і в навчальній книзі було запропоновано використовувати:

oldElement.replaceNode(newElement)

Я подивився на це і, здається, підтримується лише в IE. Дох ..

Я думав, що просто додам його сюди як смішну сторону;

— Зеліякс
джерело

2

У мене був подібний випуск і знайшов цю тему. Заміна не працювала для мене, а поїздка до батьків була складною для моєї ситуації. Внутрішня Html замінила дітей, чого я теж не хотів. За допомогою зовнішньої HTMLML було виконано завдання. Сподіваюсь, це допомагає комусь іншому!

currEl = <div>hello</div>
newElem = <span>Goodbye</span>
currEl.outerHTML = newElem
# currEl = <span>Goodbye</span>

— Шон
джерело

0

Ви можете замінити вузол з допомогою Node.replaceWith(newNode).

Цей приклад повинен зберігати всі атрибути та дочірні сигнали від початкового вузла:

const links = document.querySelectorAll('a')

links.forEach(link => {
  const replacement = document.createElement('span')

  // copy attributes
  for (let i = 0; i < link.attributes.length; i++) {
     const attr = link.attributes[i]
     replacement.setAttribute(attr.name, attr.value)
  }

  // copy content
  replacement.innerHTML = link.innerHTML

  // or you can use appendChild instead
  // link.childNodes.forEach(node => replacement.appendChild(node))

  link.replaceWith(replacement)
})

— Нурул Худа
джерело

-1

Приклад заміни елементів LI

function (element) {
    let li = element.parentElement;
    let ul = li.parentNode;   
    if (li.nextSibling.nodeName === 'LI') {
        let li_replaced = ul.replaceChild(li, li.nextSibling);
        ul.insertBefore(li_replaced, li);
    }
}

— Кирило
джерело

-1

З огляду на вже запропоновані варіанти, найпростіше рішення без пошуку батьків:

var parent = document.createElement("div");
var child = parent.appendChild(document.createElement("a"));
var span = document.createElement("span");

// for IE
if("replaceNode" in child)
  child.replaceNode(span);

// for other browsers
if("replaceWith" in child)
  child.replaceWith(span);

console.log(parent.outerHTML);

— Присідання
джерело

Як замінити елемент DOM на місці за допомогою Javascript?

A.replaceWith(span) - Батьків не потрібно

`A.replaceWith(span)` - Батьків не потрібно