Question: I know this has been adressed before, but I can't seem to get it working for me.

I am trying to create a football pitch with editable players via HTML/JavaScript/jQuery.

I can produce the field the first time when loading the page without any problems. The code looks like this:

```
    <div id="pitch" class="updateAble">
    <script type="text/javascript">     
        appBuilder(team1, team2);
    </script></div>

```

`appBuilder()` looks like this:

```
var appBuilder = function (team1, team2) {
team1.Display();
team2.Display(); }

```

It simply creates the players on the pitch for both teams. As it does. I now want to push an input-button to call a function `appUpdate()`, which deletes the content of `#pitch` and puts the `appBuilder()`-part in again as to renew it (if I changed or added players):

```
var appUpdate = function () {
var newContent = "<script type='text/javascript'>appBuilder(team1, team2);</script>";
var updateItem = $('#pitch');
updateItem.empty();
updateItem.append(newContent);}

```

Here is what drives me nuts: It seems to work just fine up to and including the `empty()`-function. So the code has to be fine. 

But when I try to append `newContent` to the `#pitch-DIV`, the programm seems to completely delete everything inside `<head>` and `<body>` it recreates a clean html-file (with empty html-, head-, body-tags) and inserts my players inside `<body>`.

Any ideas as to why it is doing that?

Thanks in advance!

**UPADTE:** The solution was a rookie mistake (which is fitting, since I'm a rookie). The `Team.Display()`-method was trying to do a `document.write()` call. As I learned: If you call `document.write` once the `document` is fully loaded, it will delete your site. Thanks to jfriend for the solution! :)

Answer: 
If you call `document.write()` AFTER the document has finished loading, then it will clear the current document and create a new empty one.

What you need to do is use DOM insertion operations rather than `document.write()` to add/change content in the DOM once the document has already loaded.

My guess is that the `.Display()` method is using `document.write()` and you need to change the way it works to insert content into a parent node rather than write it into the current position.

Some ways to insert content:

```
var newNode = document.createElement("div");
node.appendChild(newNode);

node.innerHTML = "<div>My Content</div>";

```

Or, if you're using jQuery, you can use it's wrappers for this:

```
obj.append("<div>My Content</div>");

obj.html("<div>My Content</div>");

```
.html() would empty and fill the div at once. Have you tried that ?

```
updateItem.html(newContent);

```