162

DOMの要素を置き換えようとしています。
たとえば<a>、<span>代わりに置き換えたい要素があります。

どうすればそれができますか？

javascript dom

— ああ、神様
ソース

9

target.replaceWith(element);これを行うための最新の（ES5 +）方法です

— Gibolt

2

@Gibolt DOM仕様はESで何を持っていますか？さらに、ES5は9年前にリリースされましたが、それはまだDOM標準の一部ではありません。

— ピッシュピッシュ

ES5 +はES5以降を意味します。ES5が9年前であっても、それ以降のバージョンはそれほど古いものではありません。

— JustinCB 2018年

それでも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>

— ビョルン
ソース

7

この例は機能しません。スクリプトブロックを本文の最後に配置して、機能させる必要があります。さらに、面白味のために、操作の後に[alert（myAnchor.innerHTML）]という行を追加してみてください。

— KooiInc 2009年

アンカーinnerTextのStackOverflowにスペルミスがあります

— rahul

8

ルートHTML要素の場合

— lisak

@Bjorn Tiplingに感謝します。置換された要素にIDと関数を追加する方法について、次の質問を作成しました。ここでは、stackoverflow.com

— questions / 15670261 /…

65

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

aは置換されたA要素です。

— カマレイ
ソース

1

@Bjorn Tiplingからの回答は実際には機能しません。これはKooiIncの（正しい！）回答です。これも正しいコメントです。今ではうまくいきます！;-) Tx to both！

— ペドロフェレイラ

4

きっとあなたはA lol以外の変数名を思いつくかもしれません

— quemeful

61

`A.replaceWith(span)` -親は必要ありません

一般的な形式：

target.replaceWith(element);

以前の方法よりもずっと良い/よりきれいです。

あなたのユースケース：

A.replaceWith(span);

Mozillaドキュメント

サポートされるブラウザー -94％Apr 2020

— ギボルト
ソース

13

IE11またはEdge 14ではサポートされていません（現在：2016-11-16）。

— JOR

3

Googleのクロージャーまたは別のトランスパイラーを使用してES5に変換してみてください。ブラウザのサポートに基づいて古いコードを書くべきではありません。より優れた、より保守可能なオプションがある場合

— Gibolt

1

このように蒸散。オールインワンで最適化、縮小、ダウンコンバートできます。

— ご覧

4

私がサポートしようとしているすべてのブラウザーで動作するコードを使用するか、Closureを使用するようにビルドプロセス全体を再構築するかを選択する場合、私がサポートしようとしているすべてのブラウザーで動作するコードを使用することを選択します。

— cdmckay 2017年

5

@jorできるだけ多くのブラウザーをサポートすることに同意しますが、IEやEdgeが不完全であったり、単に「異なるものにしたい」という理由だけで、コードの再作成を拒否します。彼らがそれに従わず、少数の人々がそれをサポートするなら、それは彼らの問題であり、ウェブ開発者として私たちに影響を与える必要がない標準があります。

— David Tabernero M.17年

4

この質問は非常に古いですが、私は自分がマイクロソフト認定資格を勉強しているのに気づき、勉強帳でそれを使用するよう提案されました：

oldElement.replaceNode(newElement)

調べてみたところ、IEでしかサポートされていないようです。どー

おかしいサイドノートとしてここに追加するだけだと思いました;）

— ゼリアックス
ソース

2

同様の問題があり、このスレッドを見つけました。交換は私にとってはうまくいきませんでした、そして親によって行くことは私の状況にとって困難でした。内側のHTMLが子供を置き換えましたが、これも私が望んでいたことではありませんでした。outerHTMLを使用することで仕事が完了しました。これが誰かを助けることを願っています！

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

— 不法占拠者
ソース

JavaScriptを使用してDOM要素を置き換える方法は？

A.replaceWith(span) -親は必要ありません

`A.replaceWith(span)` -親は必要ありません