Deleting and inserting Code in a DIV via jQuery

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! :)

jfriend00 · Accepted Answer · 2014-02-01 23:39:18Z

1

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

answered Feb 1, 2014 at 23:39

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tom Schaffer Over a year ago

Great guess, I indeed call document.write there. I'll try your proposed alternatives.

jfriend00 Over a year ago

@user3261606 - since you're new to StackOverflow, I wondered if you understand the system here. If someone provides you with a good answer that helps you solve your problem, you can mark that answer by clicking the checkmark to the left of the answer. This will indicate to the community which answer solved your problem and which contributor helped you. Also, you will earn some reputation points (which can earn you privileges here on StackOverflow) for following the proper procedure and the person who helped you will earn some reputation points for being helpful.

Tom Schaffer Over a year ago

hey, thanks for the hint. I acutally tried to upvote the answer of jfriend00, but the site kept telling me that i need a reputation level of 15 to do that. I didn't get, that one can also check the mark.

ddlab · Accepted Answer · 2014-02-01 23:40:35Z

0

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

updateItem.html(newContent);

answered Feb 1, 2014 at 23:40

ddlab

92817 silver badges29 bronze badges

Comments

Stéphane de Luca · Accepted Answer · 2014-02-02 19:54:30Z

0

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>

answered Feb 2, 2014 at 19:54

Stéphane de Luca

13.7k10 gold badges70 silver badges118 bronze badges

1 Comment

Tom Schaffer Over a year ago

hey, that wouldn't have helped, as the problem lay elsewhere (see solution), but thanks for providing a more elegant way of achieving this. It will come handy to know about it :)

Collectives™ on Stack Overflow

Deleting and inserting Code in a DIV via jQuery

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related