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

javascript jquery load replacewith
technopeasant picture technopeasant · Apr 15, 2012 · Viewed 11.5k times · Source

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' />");

Answer

qwertymk picture qwertymk · Apr 15, 2012 
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

Related questions

Do something AFTER the page has loaded completely

I'm using some embed codes that insert HTML to the page dynamically and since I have to modify that dynamically inserted HTML, I want a jquery function to wait until the page has loaded, I tried delay but it doesnt …

Read More
jQuery .load() / .ajax() not executing javascript in returned HTML after appended

I've tried using .load() and $.ajax to get some HTML that needs to be appended to a container, but the Javascript within the returned HTML is not being executed when I append it to an element. Using .load(): $('#new_…

Read More
JavaScript/jQuery event listener on image load for all browsers

I am looking for a way to implement this for as many browsers as possible: var image = new Image(); image.addEventListener("load", function() { alert("loaded"); }, false); image.src = "image_url.jpg"; This didn't work in IE so I googled and …

Read More