162

Я ищу заменить элемент в DOM.
Например, есть <a>элемент, который я хочу заменить <span>вместо.

Как бы я пошел и сделал это?

javascript dom

9

target.replaceWith(element);это современный (ES5 +) способ сделать это

— Gibolt

2

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

— pishpish

ES5 + означает ES5 ИЛИ ПОЗЖЕ. Даже если ES5 9 лет, более поздние версии НЕ так уж стары.

— JustinCB

Если вы все еще используете StackOverflow, стоит выбрать новый стандартный ответ ниже.

— mikemaccana

202

с помощью replaceChild () :

<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>

— Bjorn
источник

7

этот пример не сработает. Вы должны поместить блок скрипта в конец тела, чтобы он работал. Кроме того, просто для удовольствия: попробуйте добавить строку [alert (myAnchor.innerHTML)] после операции.

— KooiInc

Theres орфографическая ошибка со StackOverflow в якоре innerText

— rahul

8

Что

— делать,

Спасибо @ Бьорн Типлинг. Я создал дополнительный вопрос о том, как добавить идентификатор и функцию к заменяемому элементу, здесь: stackoverflow.com/questions/15670261/…

— JDelage

65

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

А является заменяемым элементом.

— Kamarey
источник

1

Ответ от @Bjorn Tipling на самом деле не работает. Это (правильный!) Ответ для KooiInc, также правильный комментарий. Теперь это работает! ;-) Tx к обоим!

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

4

конечно, вы могли бы придумать имя переменной, отличное от A lol

— quemeful

61

`A.replaceWith(span)` - Родитель не нужен

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

target.replaceWith(element);

Путь лучше / чище, чем предыдущий метод.

Для вашего случая использования:

A.replaceWith(span);

Mozilla Docs

Поддерживаемые браузеры - 94% апрель 2020

— Gibolt
источник

13

Не поддерживается в IE11 или Edge 14 (сейчас: 2016-11-16).

— Джор

3

Попробуйте использовать Google Closure или другой транспортер для конвертации в ES5. Вы не должны писать старый код, основанный на поддержке браузера, если у вас есть лучший и более

— удобный

1

Таким образом, пронизывающий. Вы можете оптимизировать, минимизировать и конвертировать все в одном. Проверьте это: developers.google.com/closure/compiler

— Gibolt

4

Я думаю, что если будет выбор между использованием кода, который работает во всех браузерах, которые я пытаюсь поддерживать, или перестройкой всего процесса сборки для использования Closure, я бы выбрал использование кода, который работает во всех браузерах, которые я пытаюсь поддерживать ,

— cdmckay

5

@jor Я вроде бы согласен поддерживать как можно больше браузеров, но я отказываюсь переделывать свой код только потому, что IE или Edge неполны или просто «хотят отличаться». Существуют стандарты, если они не следуют им и их поддерживают несколько человек, это их проблема, которые не должны влиять на нас как веб-разработчиков.

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

4

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

oldElement.replaceNode(newElement)

Я посмотрел его, и кажется, что он поддерживается только в IE. Doh ..

Я думал, что просто добавлю это здесь как забавную заметку;)

— Zeliax
источник

2

У меня была похожая проблема, и я нашел эту тему. Заменить не сработало для меня, и для меня было тяжело идти к родителю. Внутренний HTML заменил детей, что было не тем, чего я хотел. Использование outerHTML сделало свою работу. Надеюсь, это поможет кому-то еще!

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

— Шон
источник

0

Вы можете заменить HTML Elementили Nodeиспользовать 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)
})

Если у вас есть эти элементы:

<a href="#link-1">Link 1</a>
<a href="#link-2">Link 2</a>
<a href="#link-3">Link 3</a>
<a href="#link-4">Link 4</a>

После выполнения вышеуказанных кодов вы получите следующие элементы:

<span href="#link-1">Link 1</span>
<span href="#link-2">Link 2</span>
<span href="#link-3">Link 3</span>
<span href="#link-4">Link 4</span>

— Нурул Худа
источник

-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)` - Родитель не нужен