在自然 JavaScript 中编写 jQuery 的 replaceWith(） 的最佳方式

best way to write jQuery's replaceWith() in natural JavaScript

本文关键字：replaceWith 最佳 方式 jQuery JavaScript 自然      更新时间：2023-09-26
在函数

尽快到达页面时遇到问题，所以我需要用纯 JavaScript 编写它并将其包含在头部中。 不知道该怎么做，因为据我了解，通过使用 .replace（），新元素将被移动到页面上的不同位置。 jQuery的replaceWith（）行为是理想的。

$("#imagefiles").replaceWith("<input type='file' name='imagefiles' id='imagefiles' />");

var image = document.getElementById('imagefiles'), parent = image.parentNode,
tempDiv = document.createElement('div');
tempDiv.innerHTML = "<input type='file' name='imagefiles' id='imagefiles' />"
var input = tempDiv.childNodes[0];
parent.replaceChild(input, image);

演示

编辑根据我不是我是：

var image = document.getElementById('imagefiles'), parent = image.parentNode,
input = document.createElement('input');
input.id = input.name = "imagefiles";
input.type = 'file';
parent.replaceChild(input, image);

编辑演示

  const node = new DOMParser().parseFromString(html, 'text/html').body.childNodes[0];
  document.getElementById(id).replaceWith(node);

let element = document.getElementById("imagefiles");
element.insertAdjacentHTML("afterend","<input type='file' name='imagefiles' id='imagefiles' />");
element.parentNode.removeChild(element);

多年后。现在有一个 childNode.replaceWith（），但它并不严格等同于 JQuery replaceWith（）;它也不与 IE 兼容。

上面的代码从给定的 HTML 创建一个文档片段，并将其插入到 DOM 中的原始元素之后，然后删除原始元素，有效地替换它。

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/replaceWith

相关文章：