如何使用Javascript替换DOM元素?

2020/10/25 17:02 · javascript ·  · 0评论

我正在寻找替换DOM中的元素。

例如,有一个
<a>元素我要替换为a <span>

我将如何去做?

通过使用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>

A.replaceWith(span) -无需父母

通用形式:

target.replaceWith(element)

比以前的方法更好/更清洁。

对于您的用例:

A.replaceWith(span)

高级用法

  1. 您可以传递多个值(或使用传播运算符...)。
  2. 任何字符串值都将添加为文本元素。

例子:

// Initially [child1, target, child3]

target.replaceWith(span, "foo")     // [child1, span, "foo", child3]

const list = ["bar", span]
target.replaceWith(...list, "fizz")  // [child1, "bar", span, "fizz", child3]

安全处理null目标

如果您的目标有可能为空,则可以考虑使用新的?. 可选链接运算符。如果目标不存在,则不会发生任何事情。在这里阅读更多

target?.replaceWith(element)

相关的DOM方法

  1. 阅读更多-child.beforechild.after
  2. 阅读更多-parent.prependparent.append

Mozilla文件

支持的浏览器-94%2020年4月

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

a是替换的A元素。

这个问题很老,但是我发现自己正在学习Microsoft认证,并且在学习书中建议使用:

oldElement.replaceNode(newElement)

我查了一下,它似乎仅在IE中受支持。h

我以为我会在这里添加它作为有趣的便笺;)

我有一个类似的问题,发现了这个线程。替换对我来说不起作用,而对我而言,由父母陪伴很难。内部HTML取代了孩子,这也不是我想要的。使用outerHTML完成了工作。希望这对别人有帮助!

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

您可以替换HTML ElementNode使用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>

替换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);
    }
}

鉴于已经提出的选项,最简单的解决方案是不找父母:

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);
本文地址:http://javascript.askforanswer.com/ruheshiyongjavascripttihuandomyuansu.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!