Question

我一直想知道是否有办法阻止我的函数隐藏任何当前的文本/格式。

<body>
<script type="text/javascript">
document.body.style.backgroundColor = "#F5F0EB";
var page = 0
function flip(){
document.write(page);
page++;
}
</script>
<input type=button value="Next" onClick="flip()">
</body>

当我按下按钮时，我会丢失彩色背景并显示文字。有没有办法让背景停留并显示文字？

Answer 1

是的，不使用document.write()。 MDN explains it clearly：

写入已经加载但未调用的文档 document.open（）将自动执行document.open调用。

关于document.open() it says：

如果目标中存在文档，则此方法会清除它。

应该做什么，是操纵DOM中的节点。例如，您可以更改正文的内部HTML：

document.body.innerHTML += page;

或者，您可以创建一个文本节点并附加它：

var textNode = document.createTextNode(page);
document.body.appendChild(textNode);

在这两种情况下，当前文档都不会被刷新，只会被修改。

Answer 2

这种情况正在发生，因为您正在将非HTML写入应该是html的文档。如其他人所示，它也可能正在清除您现有的HTML。您可能希望在文档中添加新元素，而不是使用document.write。

您可以使用document.createElement函数和document.appendChild函数来执行此操作。

以下是Google搜索带来的快速搜索内容：

http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/

Answer 3

您正在将页面写入覆盖整个HTML的文档。相反，将内容写出到DIV。

这也应该可以解决您的背景颜色问题。

以下是JS Fiddle的示例。

<script type="text/javascript">
document.body.style.backgroundColor = "#F5F0EB";
var page = 0
function flip(){
document.getElementById("contentgoeshere").innerHTML=page;
page++;
}
</script>
<input type=button value="Next" onClick="flip()">
<div id="contentgoeshere">
</div>

祝你好运。

Answer 4

Mattias Buelens解释说，document.write调用open方法，它清除DOM，只是因为 - 在加载后 - 自动调用document.close方法。当然，您可以使用许多替代方案。
例如，使用innerHTML元素的body属性使用document.createElement和document.body.appendChild也是一个选项

但也许值得考虑两种方法都有其缺点：使用innerHTML允许您将格式错误的标记注入DOM，可能让您容易受到XSS攻击。
使用document.createElement速度较慢（通常）并且通常需要更多代码，这反过来会使您的脚本难以维护。

您可以使用以下内容：

var flip = (function(tempDiv)
{//create a div once
    var page = 0,
    targetDiv = document.getElementById('contentgoeshere');//closure variables
    //page is now no longer an evil global, and the target element into which
    //we will inject new data is referenced, so we don't have to scan the DOM
    //on each function call
    return function(overridePage)//optional argument, just in case
    {//actual flip function is returned here
        overridePage = overridePage || page++;//new content
        tempDiv.innerHTML = overridePage;//render in div that isn't part of the DOM
        //any number of checks can go here, like:
        if (tempDiv.getElementsByTagName('script').length > 0)
        {
            alert('Naughty client, trying to inject your own scripts to my site');
            return;
        }
        targetDiv.innerHTML = tempDiv.innerHTML;
        //or, depending on your needs:
        targetDiv.innerHTML = tempDiv.innerText;//or the other way 'round
    };
}(document.createElement('div')));

一些附注：现在看来，这个函数不起作用，因为DOM必须完全加载才能使闭包工作。快速修复就是这样：

var flip;//undefined
window.onload = function()
{
    flip = (function(tempDiv)
    {
        var page = 0,
        targetDiv = document.getElementById('contentgoeshere');
        return function(e)
        {
            tempDiv.innerHTML = e instanceof Event ? page++ : (e || page++);//ternary + logical or
            //your [optional] checks here
            targetDiv.innerHTML = tempDiv.innerHTML;
            if (e instanceof Event)
            {//this part is optional, but look it up if you want to: it's good stuff
                e.returnValue = false;
                e.cancelBubble = true;
                if (e.preventDefault)
                {
                    e.preventDefault();
                    e.stopPropagation();
                }
            }
            return e;
        };
    }(document.createElement('div')));
    //instead of using the HTML onclick attribute:
    document.getElementById('buttonID').onclick = flip;//use as event handler
};

请注意window.onload会导致内存泄漏IE＆lt; 9，check this link for the solution to this issue

使用“document.write”更新页面将删除格式

4 个答案: