js如何渲染页面内容

在前端开发中，JavaScript 可以通过操作 DOM（文档对象模型）来动态地渲染页面内容。以下是一些常见的方法：

1.innerHTML 属性：可以通过设置元素的 innerHTML 属性来改变元素的内容。

document.getElementById("myElement").innerHTML = "新内容";

2.createElement 和 appendChild 方法：可以使用 document.createElement 创建新的元素，然后使用 appendChild 将其添加到父元素中。

var newElement = document.createElement("p");
newElement.textContent = "新段落";
document.getElementById("parentElement").appendChild(newElement);

3.innerText 或 textContent 属性：可以通过设置元素的 innerText 或 textContent 属性来改变元素的文本内容。

document.getElementById("myElement").innerText = "新文本内容";

4.setAttribute 方法：可以使用 setAttribute 方法来设置元素的属性。

document.getElementById("myImage").setAttribute("src", "newimage.jpg");

5.模板字符串：可以使用 ES6 中的模板字符串来动态生成 HTML 内容。

var name = "John";
var age = 30;
var html = `<p>Name: ${name}</p><p>Age: ${age}</p>`;
document.getElementById("myElement").innerHTML = html;