document.write content replacing existing content instead of showing up beneath it

Question

I have an XML file, and each element has a child called category. On my HTML page, I have created a dropdown form that lists the possible categories (as well as "all"). When the user selects a category from the dropdown list, it assigns a javascript variable corresponding to that category, and I then use javascript/ajax to iterate over the XML file and display a list of the elements with that category. That is all working correctly... but when it displays the list, instead of showing it under the dropdown, the dropdown goes away entirely and all you see is the list. I want to display the list BELOW the dropdown, so that the user can select a different category if he/she chooses. Please help me figure out why it's getting rid of the dropdown and how to fix it. Thanks in advance! (And also, apologies if this is a really dumb question... I'm very new to javascript.)

<html>
<head>
<script>


//This is the basic XML stuff.
if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }

else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

xmlhttp.open("GET","websites.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

var x=xmlDoc.getElementsByTagName("site");

//This is the part that handles printing the items under the various categories.
function printCat(cat)
    {
        if(cat=="all")
            {
                for (i=0;i<x.length;i++)
                    {
                        document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + "<br/>");
                    }
            }

        else
            {
                for (i=0;i<x.length;i++)
                    {
                        if (x[i].getElementsByTagName("category")[0].childNodes[0].nodeValue==cat)
                            {
                                document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + "<br/>");
                            }
                    }
            }
    }
</script>
</head>
<body>

    <form action='../'>
        <select onchange='printCat(this.options[this.selectedIndex].value)'>
                <option value='all'>All</option>
                <option value='search'>Search</option>
                <option value='social_media'>Social Media</option>
        </select>
    </form>

</body>
</html>

Well good, that means `document.write` is working properly. The `document.write` method will destroy existing content if invoked after the document has finished loading. You should use the various DOM selection and modification methods to update the existing document. — I Hate Lazy, Dec 10 '12 at 20:53
This is great example of why [document.write should not be used](http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice). — amit_g, Dec 10 '12 at 20:55
It's not so much a command as it is becoming generally familiar with the DOM API. For example, if I want to create a new text node, I would do `var tn = document.createTextNode("my new content")`. Then if I want to add it to the `body`, I'd do `document.body.appendChild(tn);` — I Hate Lazy, Dec 10 '12 at 20:56
`document.write` is just fine to use, as long as you use it for its intended purpose. — I Hate Lazy, Dec 10 '12 at 20:58

score 0 · Answer 1 · answered Dec 11 '12 at 23:35

jQuery is great for adding and removing elements like this. Here's an example based on your printCat() function: http://jsfiddle.net/hansvedo/kxcvx/

You can see the bit of jQuery below will "append" new LI elements into an existing list.

<ul id="websites">
    <li>websites added here</li>
</ul>

// jQuery
$('ul#websites').append('<li>' + x[i] + '</li>');

score 0 · Accepted Answer · answered Dec 12 '12 at 01:58

Instead of document.write, use the loop you have to create a string of site names (or whatever). Include the newline character after each one ie: + "\n" +

At the end of the function add the line: this.innerHTML = myString;

The "this" refers to the functions calling element and the "innerHTML" refers to the space that sits between the calling elements open & close tags. It will overwrite anything else sitting there (much like document.write will overwrite everything between the doc tags). From there fine tune to get the result you want.

For example, create the second dropdown element and call the function from that element.

document.write content replacing existing content instead of showing up beneath it

2 Answers2