无需重新加载即可刷新[关闭]

Question

我有这个 div 我用 javascript 添加了更多的 div。

但是，每次我使用 javascript 添加一个新的 div 到 div 时，它都会刷新，因此例如这些 div 中的 youtube 视频将停止。

我可以将这些div放入div而不重新加载吗？

Answer 1

清爽？您是否使用“提交”类型的按钮（在表单中，感谢 RobG）或添加 DIV 的链接？如果是这样，您可以在调用的函数中返回 false 以附加 DIV。

HTML

<button onclick="return foo()">The Button</button>

Javascript

function foo(){
  /*all the work*/
  return false; //No matter what, return false so you don't get a page reload.
}

编辑：看起来您正在使用链接。有几种方法可以解决这个问题：

更改href

您可以将 href 更改为“#”（在 HTML 中称为 anchor）。

<a href="#">Foo</a>

当您单击它时，这不会将您转到其他页面，但有两个警告：

1. 始终滚动到页面顶部或您指定的任何部分（例如，#foo 将滚动到 id 或名称为“foo”的元素。这可能会让用户感到烦恼。
2. 为非 JavaScript 用户打开我们的页面。如果您希望该链接重定向到另一个页面，非 Javascript 用户将一直停留在该页面上。

更多信息：W3C Page on Links (and anchors)

使用 onclick 属性返回 false

在 Javascript 函数中返回 false 将阻止链接转到其原始目标。这也适用于表单。

您可以在<a> 标签的声明中指定要采取的操作，例如

<a href="foo.html" onclick="foo(); return false;">Foo</a> 
<!---The above "onclick" could also just be a function that always returns false-->

此方法维护我们希望为非 JavaScript 用户保留的任何链接，并且不会移动页面的位置。但是，这种方法也有一些缺陷：

1. 我们的 HTML 和 javascript 交织在一起。这不是世界上最大的问题，但它使我们的代码更新起来更加麻烦，因为如果我们有多个要附加此事件的元素，那么我们必须为每个元素更新它。这可能意味着在我们的 HTML 文档中编辑很多行。如果我们将 HTML 和 JavaScript 分开，我们可以让它更干燥（不要重复自己）。
2. 即使我们的 JavaScript 代码被加载到外部文件中并被缓存，我们每次都必须在浏览器中读取它。同样，根据您的 HTML 页面的大小，这可能不是一个大问题。

使用 JavaScript 绑定事件

一些 Javascript 术语：

1. 事件 - 用户浏览网页时发生的事情。这可以是单击、鼠标移动、窗口大小调整等。
2. 事件处理程序 - 响应事件发生的函数。

有很多方法可以使用 Javascript 将事件绑定到 HTML 元素，但为了简单起见，我将保持简短。

<a href="foo.html" id="foo">Foo</a>

在这里，我们将 a 标签更改为：

1. 删除 onclick 标记。
2. 添加一个 ID，使该元素易于与我们可能在页面上使用的任何其他链接（以及任何其他元素）区分开来。

让我们使用 JavaScript 将事件处理程序绑定到我们的链接：

function foo(){
 /* stuff we want to do to our div */
 return false; /* prevent page refresh */
}
function addEventToLink(){
  /* Set up a variable that we can use JavaScript to change attributes and event listeners*/
  var theLink = document.getElementById('foo'); 
  /* Set up our link to call the method 'foo', but ONLY when it is clicked on.
  * element.onclick changes the "onclick" attribute of the element */
  theLink.onclick = foo;  
}
addEventToLink(); //finally, call the method so our event listener is added to our link

请注意，使用element.onclick 您只能设置每个元素一个事件处理程序。这是基于 DOM Level 0 事件规范。如果您想为每个元素添加多个事件处理程序，请查看 Internet Explorer 和更多符合标准的浏览器（如 Firefox 和 Chrome）的功能细分Wikipedia.

现场示例：http://jsfiddle.net/77CLR/6/

Answer 2

你一定在做类似的事情：

myDiv.innerHTML += "<div>div content</div>";

这完全重建了myDiv 中的所有内容。相反，操作 DOM 以插入新的 div：

var newDiv = document.createElement("div");
newDiv.innerHTML = "<span>Some HTML</span>";
myDiv.appendChild(newDiv);