javascript - 页面加载后其他元素消失？

Question

我想用 Jquery 调用函数 javascript。但是页面加载后，所有其他元素都消失了。你可以在这里看到我的代码。我需要你的修复。

<script src='http://code.jquery.com/jquery-1.10.1.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$("#recentpost").each(function(){
mytext = "Food";
sticky();
});
});
</script>

<script type="text/javascript">
function sticky(){
document.write("<div class='sample'>"+mytext+"</div>");
}
</script>
<div id="recentpost"></div>

<div>something here disappear after loaded page</div>

感谢您的帮助

Answer 1

这是因为您在document.write页面加载后使用，它将新内容写入文档，有效地破坏了页面。

您应该使用 DOM 来操作内容，因为所有 HTML 都已编写并解析为对象树。

例如，

function sticky(){
    document.getElementById("recentpost").textContent = mytext;
}

---

此外，您在.each()ID 上使用也很奇怪。页面上只能有一个。

所以代替这个：

$("#recentpost").each(function(){
    mytext = "Food";
    sticky();
});

你会这样做：

$("#recentpost").text("Food");

---

或者如果你想使用你的sticky()函数，你应该将值传递给函数，而不是使用全局变量。

sticky("Food");

function sticky(mytext) {
    $("#recentpost").text(mytext);
}