blocks|key|1562478|text|通过使用replaceChild()|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1562479|<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>|code-block|syntax|javascript|1562480|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild^0|4|E|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>by using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild" rel="noreferrer">replaceChild()</a>:</p>

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


blocks|key|1562510|text|var+a+=+A.parentNode.replaceChild(document.createElement("span"),+A);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1562511|A是被替换的A元素。|unstyled|1562512|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>var a = A.parentNode.replaceChild(document.createElement("span"), A);
</code></pre>

<p>a is the replaced A element.</p>


blocks|key|1562583|text|这个问题很老了，但我发现自己在学习微软认证，在学习书中建议使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1562584|oldElement.replaceNode(newElement)|code-block|syntax|javascript|1562585|我查了一下，似乎只有IE才支持。多..。|1562586|我想我应该把它添加到这里作为有趣的附注;)|1562587|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>This question is very old, but I found myself studying for a Microsoft Certification, and in the study book it was suggested to use: </p>

<pre><code>oldElement.replaceNode(newElement)
</code></pre>

<p>I looked it up and it seems to only be supported in IE. Doh..</p>

<p>I thought I'd just add it here as a funny side note ;)</p>


blocks|key|1562685|text|我遇到了类似的问题，找到了这个帖子。替换对我来说不起作用，而且对于我的情况来说，通过父母是很困难的。内部Html替换了孩子，这也不是我想要的。使用outerHTML完成了这项工作。希望这对其他人有帮助！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1562686|currEl+=+<div>hello</div>
newElem+=+<span>Goodbye</span>
currEl.outerHTML+=+newElem
#+currEl+=+<span>Goodbye</span>|code-block|syntax|javascript|1562687|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I had a similar issue and found this thread. Replace didn't work for me, and going by the parent was difficult for my situation. Inner Html replaced the children, which wasn't what I wanted either. Using outerHTML got the job done. Hope this helps someone else! </p>

<pre><code>currEl = &lt;div&gt;hello&lt;/div&gt;
newElem = &lt;span&gt;Goodbye&lt;/span&gt;
currEl.outerHTML = newElem
# currEl = &lt;span&gt;Goodbye&lt;/span&gt;
</code></pre>


blocks|key|1562750|text|您可以使用Node.replaceWith(newNode)替换HTML+Element或Node。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1562751|此示例应保留来自源节点的所有属性和childs：|1562752|const+links+=+document.querySelectorAll('a')

links.forEach(link+=>+{
++const+replacement+=+document.createElement('span')
++
++//+copy+attributes
++for+(let+i+=+0;+i+<+link.attributes.length;+i%2B%2B)+{
+++++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)
})|code-block|syntax|javascript|1562753|如果您有以下元素：|1562754|<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>|1562755|运行上述代码后，您将得到以下元素：|1562756|<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>|1562757|entityMap^0|5|P|W|C|19|4|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|17|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|U|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|V|$]]

<p>You can replace an <code>HTML Element</code> or <code>Node</code> using <code>Node.replaceWith(newNode)</code>.</p>
<p>This example should keep all attributes and childs from origin node:</p>
<pre class="lang-js prettyprint-override"><code>const links = document.querySelectorAll('a')

links.forEach(link =&gt; {
  const replacement = document.createElement('span')
  
  // copy attributes
  for (let i = 0; i &lt; 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 =&gt; replacement.appendChild(node))

  link.replaceWith(replacement)
})
</code></pre>
<p>If you have these elements:</p>
<pre class="lang-html prettyprint-override"><code>&lt;a href=&quot;#link-1&quot;&gt;Link 1&lt;/a&gt;
&lt;a href=&quot;#link-2&quot;&gt;Link 2&lt;/a&gt;
&lt;a href=&quot;#link-3&quot;&gt;Link 3&lt;/a&gt;
&lt;a href=&quot;#link-4&quot;&gt;Link 4&lt;/a&gt;
</code></pre>
<p>After running above codes, you will end up with these elements:</p>
<pre class="lang-html prettyprint-override"><code>&lt;span href=&quot;#link-1&quot;&gt;Link 1&lt;/span&gt;
&lt;span href=&quot;#link-2&quot;&gt;Link 2&lt;/span&gt;
&lt;span href=&quot;#link-3&quot;&gt;Link 3&lt;/span&gt;
&lt;span href=&quot;#link-4&quot;&gt;Link 4&lt;/span&gt;
</code></pre>


blocks|key|1347217|text|在创建新元素(createElement)之后，可以在目标元素的父级上使用replaceChild：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1347218|const+newElement+=+document.createElement(/*...*/);
const+target+=+document.getElementById("my-table");
target.parentNode.replaceChild(newElement,+target);|code-block|syntax|javascript|1347219|如果新元素的起点是HTML，则可以在父元素上使用insertAdjacentHTML，然后在父元素上使用removeChild+(在现代环境中，也可以对元素本身使用remove+)：|1347220|const+target+=+document.getElementById("my-table");
target.insertAdjacentHTML("afterend",+theHTMLForTheNewElement);
target.parentNode.removeChild(target);+//+Or:+`target.remove()`|1347221|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement|1|https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild|2|https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML|3|https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild|4|https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove^0|7|D|11|C|7|D|0|11|C|1|0|0|O|I|1G|B|2A|6|O|I|2|1G|B|3|2A|6|4|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@$9|19|A|1A|1|1B]|$9|1C|A|1D|1|1E]]|E|$]]|$1|F|3|G|5|H|7|1F|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1G|8|@$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]|$9|1L|A|1M|B|C]]|D|@$9|1N|A|1O|1|1P]|$9|1Q|A|1R|1|1S]|$9|1T|A|1U|1|1V]]|E|$]]|$1|M|3|N|5|H|7|1W|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|1X|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]|Y|$5|R|S|T|E|$U|Z]]|10|$5|R|S|T|E|$U|11]]|12|$5|R|S|T|E|$U|13]]]]

<p>You can use <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild" rel="nofollow noreferrer"><code>replaceChild</code></a> on the parent of the target element after creating your new element (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement" rel="nofollow noreferrer"><code>createElement</code></a>):</p>
<pre><code>const newElement = document.createElement(/*...*/);
const target = document.getElementById(&quot;my-table&quot;);
target.parentNode.replaceChild(newElement, target);
</code></pre>
<p>If your starting point for the new element is HTML, you can use <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML" rel="nofollow noreferrer"><code>insertAdjacentHTML</code></a> and then <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild" rel="nofollow noreferrer"><code>removeChild</code></a> on the parent (or <a href="https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove" rel="nofollow noreferrer"><code>remove</code></a> on the element itself, in modern environments):</p>
<pre><code>const target = document.getElementById(&quot;my-table&quot;);
target.insertAdjacentHTML(&quot;afterend&quot;, theHTMLForTheNewElement);
target.parentNode.removeChild(target); // Or: `target.remove()`
</code></pre>


blocks|key|1347273|text|这是最好的方法。父母不需要。只需使用Element.outerHTML+=+template;即可|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1347274|//+Get+the+current+element
var+currentNode+=+document.querySelector('#greeting');

//+Replace+the+element
currentNode.outerHTML+=
++++'<div+id="salutations">'+%2B
++++++++'<h1>Hi,+universe!</h1>'+%2B
++++++++'<p>The+sun+is+always+shining!</p>'+%2B
++++'</div>';|code-block|syntax|javascript|1347275|entityMap^0|I|T|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Best way to do it. No parents need. Just use <code>Element.outerHTML = template;</code></p>
<pre><code>// Get the current element
var currentNode = document.querySelector('#greeting');

// Replace the element
currentNode.outerHTML =
    '&lt;div id=&quot;salutations&quot;&gt;' +
        '&lt;h1&gt;Hi, universe!&lt;/h1&gt;' +
        '&lt;p&gt;The sun is always shining!&lt;/p&gt;' +
    '&lt;/div&gt;';
</code></pre>


blocks|key|1347061|text|替换LI元素的示例|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1347062|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);
++++}
}|code-block|syntax|javascript|1347063|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Example for replacing LI elements</p>

<pre><code>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);
    }
}
</code></pre>


blocks|key|1347164|text|给出了已经提出的选项，这是最简单的解决方案，不需要找到父级：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1347165|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);|code-block|syntax|javascript|1347166|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Given the already proposed options the easiest solution without finding a parent:</p>

<pre><code>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);
</code></pre>


<p>I am looking to replace an element in the DOM. <br>
For example, there is an <code>&lt;a&gt;</code> element that I want to replace with a <code>&lt;span&gt;</code> instead.</p>

<p>How would I go and do that?</p>


How to replace DOM element in place using Javascript?

我正在寻找替换DOM中的元素。例如，我想用<span>替换一个<a>元素。我该怎么去做呢？

问如何使用Javascript替换DOM元素？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Javascript替换DOM元素？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Javascript替换DOM元素？
EN