HTML/Javascript: Display:none copy and paste issue

Question

I have read a number of posts on this topic but haven't found a solution to my particular situation. Perhaps there isn't one but I figured I would ask.

I have a report being generated in HTML from a powershell script, its being dumped to a folder on a server (NOT A WEBSERVER, so no PHP or any fun stuff available)

The report can then be filtered by error type or information. This is done by display:none 'ing various elements, wether they be tr's or div's.. Javascript Below

These filters can hide a variety of things making hundreds of possible combinations of different elements possible. So moving them or removing and creating them using DOM's would rough because I dont know how I would tell it where to put the element back.

I need to make it so that a filtered report can be copy pasted to send out in emails. Any Ideas?

    function showhide(button) {
        if (button.value == 'hide') {
            var arr = document.getElementsByName(button.name +'tr');
            var length = arr.length;
            for (var i = 0; i < length; i++) {
                arr[i].style.display = 'none';
            }
            document.getElementById(button.name +'div').innerHTML = "<a href='javascript:void(0)' onclick='showhide(this)' name='" + button.name  + "' value='show'>Show " + button.name  + "</a>";
        }
        else if (button.value == 'show') {
            document.getElementById(button.name +'div').innerHTML = "<a href='javascript:void(0)' onclick='showhide(this)' name='" + button.name  + "' value='hide'>Hide " + button.name  + "</a>";
            var arr = document.getElementsByName(button.name  +'tr');
            var length = arr.length;
            for (var i = 0; i < length; i++) {
                arr[i].style.display = '';
            }
        }
    }

Solution:

function showhide(button) {
        var seeMe = document.getElementById('visible');
        seeMe.innerHTML = ' ';
        if (button.value == 'hide') {
            var arr = document.getElementsByName(button.name +'tr');
            var length = arr.length;
            for (var i = 0; i < length; i++) {
                arr[i].style.display = 'none';
                arr[i].name = 'h';
            }
            document.getElementById(button.name +'div').innerHTML = "<a href='javascript:void(0)' onclick='showhide(this)' name='" + button.name  + "' value='show'>Show " + button.name  + "</a>";
        }
        else if (button.value == 'show') {
            document.getElementById(button.name +'div').innerHTML = "<a href='javascript:void(0)' onclick='showhide(this)' name='" + button.name  + "' value='hide'>Hide " + button.name  + "</a>";
            var arr = document.getElementsByName(button.name  +'tr');
            var length = arr.length;
            for (var i = 0; i < length; i++) {
                arr[i].style.display = '';
                arr[i].name = 's';
            }
        }
        var search = document.getElementById('hidden').children;
        for(var i = 0; i < search.length; i++) {
            seeMe.appendChild(search[i].cloneNode(true));
        }
        var paras = document.getElementById('visible').getElementsByTagName('*');
        for(var i = 0; i < paras.length; i++) {
            if (paras[i].name == 'h') {
                paras[i].parentNode.removeChild(paras[i]);
                i--
            }
        }
  }

Answer 1

When you first apply any of the filters, copy all of the HTML elements from the page into a document fragment object, manipulate their visibility there, then copy only the visible objects back into the DOM. Changing filters is applied in the fragment and then copied back.