Question

我知道之前已经解决了这个问题，但我似乎无法让它为我工作。

我正在尝试通过HTML / JavaScript / jQuery创建一个可编辑玩家的足球场。

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

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

appBuilder()看起来像这样：

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

它只是为两支球队创造了球场上的球员。就像它一样。我现在想要按下一个输入按钮来调用一个函数appUpdate()，该函数会删除#pitch的内容并再次放入appBuilder() - 部分以更新它（如果我更改了添加球员）：

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

这就是让我疯狂的原因：它似乎可以正常工作并包括empty() - 功能。所以代码必须没问题。

但是当我尝试将newContent附加到#pitch-DIV时，程序似乎完全删除了<head>和<body>内的所有内容，它会重新创建一个干净的html文件（带有空html-，head-，body-tags）并将我的玩家插入<body>。

关于它为什么这样做的任何想法？

提前致谢！

UPADTE：解决方案是一个菜鸟错误（这是合适的，因为我是菜鸟）。 Team.Display() - 方法正在尝试进行document.write()调用。据我了解到：如果document.write完全加载后致电document，则会删除您的网站。感谢jfriend的解决方案！：）

Answer 1

如果您在文档加载完毕后调用document.write()，则会清除当前文档并创建一个新文档。

您需要做的是使用DOM插入操作而不是document.write()在文档加载后添加/更改DOM中的内容。

我的猜测是.Display()方法正在使用document.write()，您需要更改将内容插入父节点而不是将其写入当前位置的方式。

插入内容的一些方法：

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

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

或者，如果你正在使用jQuery，你可以使用它的包装器：

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

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

Answer 2

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

updateItem.html(newContent);

Answer 3

我为您的代码提出了一个JQuery替代品，可以根据您自己的打字风格进行操作。

请注意，我保持.html（）调用模仿你的“empty（）”函数，但没有必要。简单地将他的代码放在附加中，直接进入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>

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

3 个答案: