Javascript 通过jQuery在DIV中删除和插入代码_Javascript_Jquery_Html

Javascript 通过jQuery在DIV中删除和插入代码

javascript jquery html

Javascript 通过jQuery在DIV中删除和插入代码,javascript,jquery,html,Javascript,Jquery,Html,我知道这个问题以前已经解决过，但我似乎无法让它对我起作用我正试图通过HTML/JavaScript/jQuery创建一个足球场，其中包含可编辑的球员我可以在加载页面时第一次生成字段，没有任何问题。代码如下所示： <div id="pitch" class="updateAble"> <script type="text/javascript"> appBuilder(team1, team2); </script

我知道这个问题以前已经解决过，但我似乎无法让它对我起作用

我正试图通过HTML/JavaScript/jQuery创建一个足球场，其中包含可编辑的球员

我可以在加载页面时第一次生成字段，没有任何问题。代码如下所示：

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

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

它只是为两队创造了在场上的球员。事实就是这样。现在我想按下一个输入按钮来调用一个函数

appUpdate（）

，该函数删除

#pitch

的内容，并再次放入

appBuilder（）

-部分以更新它（如果我更改或添加了播放器）：

var appUpdate=函数（）{
var newContent=“appBuilder（团队1、团队2）；”；
var updateItem=$（“#pitch”）；
updateItem.empty（）；
updateItem.append（newContent）；}

下面是让我发疯的原因：它似乎在

empty（）

-函数之前工作得很好。所以代码必须是好的

但是，当我尝试将

新内容

附加到

#pitch DIV

时，该程序似乎完全删除了

中的所有内容，

它重新创建了一个干净的html文件（带有空的html、head和body标记），并将我的播放器插入

中

你知道它为什么这么做吗

提前谢谢

UPADTE:解决方案是新手犯的错误（这很合适，因为我是新手）。

Team.Display（）

-方法试图执行

document.write（）

调用。据我所知：如果你调用

document.write

，一旦

文档

完全加载，它将删除你的站点。感谢jfriend提供的解决方案！：）

如果在文档完成加载后调用

document.write（）

，则它将清除当前文档并创建一个新的空文档

您需要做的是使用DOM插入操作而不是

document.write（）

在加载文档后添加/更改DOM中的内容

我猜

.Display（）

方法使用的是

document.write（）

，您需要更改将内容插入父节点的工作方式，而不是将其写入当前位置

插入内容的一些方法：

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

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

var newNode=document.createElement（“div”）；
appendChild（newNode）；
node.innerHTML=“我的内容”；

或者，如果您正在使用jQuery，您可以使用它的包装器来实现以下目的：

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

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

obj.append（“我的内容”）；
html（“我的内容”）；

.html（）将立即清空并填充div。你试过了吗

updateItem.html(newContent);

我建议用JQuery替换您的代码，它可以满足您的需求，并与您自己的键入风格保持一致

请注意，我保留了.html（）调用以模拟“empty（）”函数，但这不是必需的。只需将代码放在append中，直接放在html（）中，就可以去掉多余的多余代码

我的代码替换，作为一个100%正常运行的.html文件。希望有帮助，干杯

<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>


var appBuilder=功能（团队1、团队2）{
//team1.Display（）；
//team2.Display（）；
}
var团队1、团队2；
appBuilder（团队1、团队2）；//要更新的原始代码
var appUpdate=函数（）{
$（“#pitch”）.html（“”）。追加（$（“”）{
html：“appBuilder（团队1，团队2）；//全新，替换代码”
}));
}
appUpdate（）；

猜得好，我真的叫document.write。我将尝试您提出的备选方案。@user3261606-由于您是StackOverflow新手，我想知道您是否了解这里的系统。如果有人为您提供了一个帮助您解决问题的好答案，您可以单击答案左侧的复选标记来标记该答案。这将向社区表明哪个答案解决了您的问题，哪个贡献者帮助了您。此外，如果您遵循正确的程序，您将获得一些声誉点数（这可以为您在StackOverflow上赢得特权），帮助您的人将获得一些声誉点数，因为他们提供了帮助。嘿，谢谢您的提示。我真的试图更新jfriend00的答案，但该网站一直告诉我，我需要15级的声誉才能做到这一点。我没有得到，一个人也可以检查标记。嘿，这不会有帮助，因为问题在别处（见解决方案），但感谢你提供了一个更优雅的方法来实现这一点。了解它会很方便：）

<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>