Question

我正在尝试运行使用函数生成内容的代码，并且可以在内容中更改内容，但是当内容更改时，不会再次应用任何CSS。真的很奇怪。

以下是我的代码示例，概括：

function flush(divId) {
    $(divId).parentNode.removeChild(divId);
}

function makeContent(arg1,arg2,arg3) {
    document.write('<div class="exampleClass" id="' + arg1 + 'Id">');
    if(arg3 < 1000) { // Chose an arbitrary number
        if (arg2 != "ArbritraryArg") {
            document.write('<span class="spanLink" onclick="flush(\'' + arg1 + 'Id\')\; makeContent(\'' + arg1 + '\',\'Something\',' + arg3 + ')\;">Blarg</span>');
        } else {
            document.write('<span class="spanLink" onclick="flush(\'' + arg1 + 'Id\')\; makeContent(\'' + arg1 + '\',\'SomethingElse\',' + arg3 + ')\;">Yearg</span>');
        }
    }

    var i = 0;
    var mdArray = eval(arg1 + 'Id' + arg3); // This is a multidimensional array which does exist just above the lines for function flush(). There are no possible problems in the array's definition, and so I did not include it here.
    do {
        document.write('<div class="exampleClass2">' + mdArray[i][0] + '</div><div class="exampleClass3">' + mdArray[i][1] + '</div>');
        i++;
    } while (i < mdArray.length);

    document.write('</div>');
    var parentDiv = document.getElementById('parentDiv');
    parentDiv.insertBefore(monster + 'Set',parentDiv.firstChild);
}

document.write('<div id="parentDiv">');
makeContent('Arg1','Something',Arg3);
document.write('</div>');

我的问题是，当我通过在.html文档中引用此脚本文件进行测试时，第一次执行makeContent（）（当由脚本本身执行时），一切都很完美......但是否则，不是这样。我已经使用只调用flush函数的外部<span>链接测试了flush（）函数，它工作正常，只需删除makeContent（）数据，并将HTML文档中的所有其他内容保留在那里。 / p>

因此，如果我点击我编写的示例代码第9行中生成的<span>链接，内容会发生变化，但会重新应用相关CSS的NONE，以及HTML中的所有其他内容文件也消失了。这是怎么回事？如果我使用外部链接尝试相同的功能，就像我测试flush（）的方式一样，会发生同样的问题。

以下是我如何获得HTML页面，以防有人想知道：

<html><head><title>Testing</title>
<link rel="stylesheet" href="stylesheet.css">
</head><body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,...</p>
<script href="script.js"></script>
<p><span class="spanLink" onclick="flush('Arg1Id');">Get rid of the content (TEST)</span></p>
<p><span class="spanLink" onclick="flush('Arg1Id'); makeContent('Arg1','Arg2',Arg3);">Try regenerating the content (TEST)</span></p>
</body></html>

感谢您的帮助！

编辑：所以我注意到在test.html文件中，当我尝试重新生成内容时，标题从“测试”更改为“test.html”...是新生成的内容会杀死文件中的所有HTML元素吗？

Answer 1

document.write只应在页面加载时使用，如果在页面加载后触发事件，它将覆盖您的内容，您的所有页面都将包含该内容。而是尝试将文本插入DOM。使用innerHTML

使用javascript函数替换div的内容，注意到怪异

1 个答案: