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

Question

Having trouble with a function hitting the page as soon as possible, so i need to write it in pure javascript and include it in the head. not sure how to go about it, because as i understand it, by using .replace() the new element will be moved to a different location on the page. jQuery's replaceWith() behavior is ideal.

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

.replace() is for strings. Please don't use it for DOM. Could you describe your issue a little better? Are you saying you want an element to be replaced as soon as it appears, and not wait for the rest of the DOM to be ready? — user1106925
– user1106925, Commented Apr 15, 2012 at 19:28

qwertymk · Accepted Answer · 2012-04-15 19:34:18Z

9

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

DEMO

EDIT as per am not i am:

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

parent.replaceChild(input, image);

edited DEMO

edited Apr 15, 2012 at 19:34

answered Apr 15, 2012 at 19:28

qwertymk

35.6k31 gold badges127 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1106925 Over a year ago

Why the div? It'll be faster and less code to just create the input directly. input = document.createElement('input'); input.type = "file"; input.id = input.name = "imagefiles";

technopeasant Over a year ago

@qwertymk it works in jsFiddle, but my webinspector is showing an error on the final line: "Uncaught SyntaxError: Unexpected token ILLEGAL"

qwertymk Over a year ago

@technopeasant: dude, you gotta vote more to get people to answer you, 11 votes all time when you asked 128 questions?

user1106925 Over a year ago

@technopeasant: You can pick up some invisible and illegal characters if you copy/paste from jsFiddle. Better to copy the code from here instead.

Diego Carrion · Accepted Answer · 2021-01-19 03:01:24Z

3

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

answered Jan 19, 2021 at 3:01

Diego Carrion

5735 silver badges8 bronze badges

Comments

gatecrasher · Accepted Answer · 2021-03-16 11:21:56Z

1

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

Years later. There is now an childNode.replaceWith() but it is not strictly equivalent to the JQuery replaceWith(); Nor is it compatible with I.E.

The above code creates a document fragment from the given HTML, and inserts it after the original element in the DOM and then deletes the original element, effectively replacing it.

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

answered Mar 16, 2021 at 11:21

gatecrasher

111 bronze badge

1 Comment

Bryan C. Over a year ago

This I thought was the simplest way to emulate jQuery's replaceWith. No temp element needed.

Collectives™ on Stack Overflow

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

3 Answers 3

DEMO

edited DEMO

4 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related