js如何渲染页面内容

最新推荐文章于 2024-07-17 15:26:15 发布

子玉欸

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量335

点赞数 3

分类专栏：前端文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_68299987/article/details/137125051

版权

77 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript如何通过innerHTML、createElement、appendChild等方法操作DOM，以及innerText、textContent和setAttribute设置元素内容，以及模板字符串在动态生成HTML方面的应用，以实现页面内容的动态渲染。

摘要由CSDN通过智能技术生成

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

innerHTML 属性：可以通过设置元素的 innerHTML 属性来改变元素的内容。
```
document.getElementById("myElement").innerHTML = "新内容";
```

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

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

innerText 或 textContent 属性：可以通过设置元素的 innerText 或 textContent 属性来改变元素的文本内容。
```
document.getElementById("myElement").innerText = "新文本内容";
```
setAttribute 方法：可以使用 setAttribute 方法来设置元素的属性。
```
document.getElementById("myImage").setAttribute("src", "newimage.jpg");
```

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

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

通过以上方法，你可以使用 JavaScript 动态地更新、添加或移除页面的内容，实现页面的渲染效果。

关注