在前端开发中,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;