Random Allocation of divs through JavaScript

Random Allocation of divs through JavaScript

I have a series of strings which I am calling from PHP in to JS.
Currently, I am placing these within a container. But I wish to randomize
their positions, with out overlaps. Here is my JS script;
<script type="text/javascript">
// wait for the page to load
function makelist(){
// Establish the array which acts as a data source for the list
var listData = <?php echo json_encode($outputWords); ?>;
// Make a container element for the list - which is a <div>
// You don't actually need this container to make it work
var listContainer = document.createElement("div");
// add it to the page
document.getElementsByTagName("body")[0].appendChild(listContainer);
// Make the list itself which is a <ul>
var listElement = document.createElement("ul");
// add it to the page
listContainer.appendChild(listElement);
// Set up a loop that goes through the items in listItems one at a
time
var numberOfListItems = listData.length;
for( var i = 0 ; i < numberOfListItems ; ++i){
// create a <li> for each one.
var listItem = document.createElement("div");
// add the item text
listItem.innerHTML = listData[i];
// add listItem to the listElement
listElement.appendChild(listItem);
}
};
</script>
How is best to go about this? I have tried looking for a shortcut or
function for positions/positiony but I have not found one.