JavaScript -DOM - Miscellaneous


How can we serialize an HTML element into a String?

new XMLSerializer().serializeToString(el);

The XMLSerializer().serializeToString method takes one parameter which is a DOM element and convert it into a string.

How can we obtain the parent element of an element?


In JavaScript/DOM, there's the method “insertBefore”. But what if you want to insert after a element?

I still need to come up with the answer to this question and provide a complete example.

How can we force the browser to re-render the page?

I was in a situation where I need to do a lot of DOM manipulation (changing the size of various elements within a page). The body element was assigned a specific height and width, and has overflow set to auto. I was inside an iframe… I was also dealing with compatibility-view enabled, and I guess changing size for a few elements one after another cause IE to go crazy, so the body element behave as though it has overflow set to hidden. To deal with this problem, I had to force IE to re-render using: = 1.25; = 1;

I already had zoom set to 1 on the body element.

quantros.forceRepaint = function(selector) {
    document.body.className = document.body.className;
        var el = jQuery(selector).get(0);
        el.className += ' ';

The CSS for the forceRepaint class:

.forceRepaint {
    zoom: 1;
    display: block;
    height: auto !important;

I've tried other approaches which failed for me:

html {
    height: 101%; /* setting height to 101% forces scroll bar to display */

// Set overflow to hidden and then in a setTimeout, set it back to auto.
// Set the zoom level to 99%, and then in a setTimeout, set it back to 1.


jQuery.fn.redraw = function() {
    return this.hide(0, function() {

call window.getComputedStyle() should force a reflow

setTimeout(function() {
}, 0);

$(el).css("opacity", .99);
   $(el).css("opacity", 1);

if( == '0px'){ = ''; = '0px';
} else { = '0px'; = '';
} = 'none';
el.clientHeight; = 'block';

Insert a dummy element (really big and really tall but does not contain anything) 
into the page, and then remove it, perhaps using a setTimeout. 

Add a dummy class to the element, and then remove it. += ';-webkit-transform:rotateZ(0deg)'
el.offsetHeight += ';-webkit-transform:none'

$(el).css("border", "solid 1px transparent");
    $(el).css("border", "solid 0px transparent");
}, 1000);

var forceRedraw = function(element){
  var disp =; = 'none';
  var trick = element.offsetHeight; = disp;
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License