Как заменить элемент DOM на месте с помощью Javascript? - PullRequest
Новая
       8

Как заменить элемент DOM на месте с помощью Javascript?

143 голосов
/ 09 мая 2009

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

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

Ответы [ 7 ]

190 голосов
/ 09 мая 2009

с помощью 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>
64 голосов
/ 09 мая 2009 
var a = A.parentNode.replaceChild(document.createElement("span"), A);

a - заменяемый элемент A.

43 голосов
/ 06 ноября 2016

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

Общая форма: 

target.replaceWith(element);

Намного лучше / чище, чем в предыдущем методе.

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

A.replaceWith(span);

Документы Mozilla

Поддерживаемые браузеры - 90% апр. 2019

3 голосов
/ 22 мая 2018

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

oldElement.replaceNode(newElement)

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

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

0 голосов
/ 27 мая 2019

Учитывая уже предложенные варианты простейшего решения без поиска родителя: 

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);
0 голосов
/ 24 марта 2019

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

currEl = <div>hello</div>
newElem = <span>Goodbye</span>
currEl.outerHTML = newElem
# currEl = <span>Goodbye</span>
0 голосов
/ 01 октября 2018

Пример замены элементов 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);
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...