插入 HTML 块和动态内容 - JavaScript

在 JavaScript 中插入 HTML 块和动态内容是非常重要的操作，这有助于界面的实时更新和动态交互。

插入 HTML 块

要插入 HTML 块，可以使用以下方法：

1. innerHTML

document.getElementById("elementId").innerHTML = "<p>新的 HTML 块</p>";

将 elementId 元素的 innerHTML 属性设置为新的 HTML 块。这将替换原有的内容。

2. createElement 和 appendChild

var newDiv = document.createElement("div");
var newContent = document.createTextNode("新的 HTML 块");
newDiv.appendChild(newContent);
document.body.appendChild(newDiv);

使用 createElement 创建新的元素，使用 createTextNode 创建新的内容，然后使用 appendChild 将新创建的元素和内容添加到文档中。

插入动态内容

要插入动态内容，可以使用以下方法：

1. setInterval 和 innerHTML

var count = 0;

setInterval(function() {
  count++;
  document.getElementById("elementId").innerHTML = "<p>" + count + "</p>";
}, 1000);

使用 setInterval 定期更新变量，然后将变量的值插入 HTML 中。

2. requestAnimationFrame 和 innerHTML

var count = 0;

function updateCount() {
  count++;
  document.getElementById("elementId").innerHTML = "<p>" + count + "</p>";
  requestAnimationFrame(updateCount);
}

requestAnimationFrame(updateCount);

使用 requestAnimationFrame 定期更新变量，然后将变量的值插入 HTML 中。

3. WebSocket 和 innerHTML

var ws = new WebSocket("ws://localhost:8080");

ws.onmessage = function(event) {
  document.getElementById("elementId").innerHTML = event.data;
};

使用 WebSocket 连接到服务器，然后在每次消息到达时将消息的内容插入 HTML 中。

以上是 JavaScript 中插入 HTML 块和动态内容的一些方法，这些方法可以实现实时更新和动态交互的效果。