JavaScript -DOM - Miscellaneous

javascript-dom

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?

element.parentNode

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:

bodyDom.style.zoom = 1.25;
bodyDom.style.zoom = 1;

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

quantros.forceRepaint = function(selector) {
    jQuery(selector).addClass('forceRepaint');
    document.body.className = document.body.className;
    setTimeout(function(){
        var el = jQuery(selector).get(0);
        el.offsetTop;
        el.scrollTop;
        el.offsetHeight;
        el.className += ' ';
        jQuery(selector).removeClass('forceRepaint');
    },100);
}

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.

$(window).trigger('resize');

jQuery.fn.redraw = function() {
    return this.hide(0, function() {
        $(this).show();
    });
};
$(el).redraw();

call window.getComputedStyle() should force a reflow

$('#page').hide();
setTimeout(function() {
    $('#page').show();
}, 0);

$(el).css("opacity", .99);
setTimeout(function(){
   $(el).css("opacity", 1);
},20);

if(div.style.marginLeft == '0px'){
    div.style.marginLeft = '';
    div.style.marginRight = '0px';
} else {
    div.style.marginLeft = '0px';
    div.style.marginRight = '';
}

el.style.display = 'none';
el.offsetHeight;
el.scrollHeight;
el.clientHeight;
el.style.display = '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.

el.style.cssText += ';-webkit-transform:rotateZ(0deg)'
el.offsetHeight
el.style.cssText += ';-webkit-transform:none'

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

var forceRedraw = function(element){
  var disp = element.style.display;
  element.style.display = 'none';
  var trick = element.offsetHeight;
  element.style.display = disp;
};