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>");

```
I proposed a JQuery replacement for your code that does what you want, ion the style of your own typing.

Note that I kept the .html() call to mimic your "empty()" function, but it is not necessary. Simply put he code in the append, straight into the html() et get rid of the extra unnecessary remaing bit of code.

My code replacement, as a 100% functioning .html file. Hope it helps, cheers.

```
<html>
<header>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
    var appBuilder = function (team1, team2) {
        //team1.Display();
        //team2.Display(); 
    }
    var team1, team2;
    </script>
</header>
<body>
    <div id="pitch" class="updateAble">
        <script type="text/javascript">     
            appBuilder(team1, team2); // Original code to be updated
        </script>
    </div>

    <script>
var appUpdate = function () {

    $("#pitch").html("<!-- Old javscript code has been flushed -->").append($("<script />", {
      html: "appBuilder(team1, team2); // brand new, replaced code"
    }));
}

appUpdate();
</script>
</body>
</html>

```