【JavaScript入门-27】创建HTML-creatElement
【摘要】 前言在之前的文章中，我们主要介绍了如何去操作现有的DOM。本文主要来介绍如何创建元素！在JS中创建元素有多种方法，最常用的是document.createElement(）var element = document.createElement(tagName[, options]);createElement接受必填参数tagName，指定标签名，例如创建p标签，tagName就是p。还...
前言
在之前的文章中，我们主要介绍了如何去操作现有的DOM。本文主要来介绍如何创建元素！
在JS中创建元素有多种方法，最常用的是document.createElement(）
var element = document.createElement(tagName[, options]);
createElement接受必填参数tagName，指定标签名，例如创建p标签，tagName就是p。
还可以接受一个非必填的选项。
我们来创建一个p标签。
<body>
<script>
const myP = document.createElement('p');
console.log(myP);
</script>
</body>
我们运行html文件，在控制台中可以看到输出。但是页面上看不到！这是因为我们只是创建了它，还没有把它放到页面上！
现在已经有了p元素，我们就可以按照我们之前的属性，来修改p标签！
const myP = document.createElement('p');
console.log(myP);
mp.text='我是createElement创建的p标签';
console.log(myP);
添加完属性之后，我们该如何把它添加到页面中？
我们这里使用appendChild的方法来添加到页面中，前提是，你得有一个可以调用appendChild的元素。例如最简单的document.body
const myP = document.createElement('p');
myP.textContent='我是createElement创建的p标签';
console.log(myP);
document.body.appendChild(myP)
任何节点都可以调用appendChild方法。
调用的顺序
例如我们有下面一段代码,我们先往body中添加了一个div,然后又往div中加入了一个p标签。
myDiv=document.createElement('div');
myP=document.createElement('p')
document.body.appendChild(myDiv);
myDiv.appendChild(myP);
如果我们调整append的顺序，会不会更好？
myDiv=document.createElement('div');
myP=document.createElement('p')
myDiv.appendChild(myP);
document.body.appendChild(myDiv);
我们在这里做的是：
- 我们正在创建元素并将段落插入到 div 中
- 然后我们也将图像插入到 div 中
- 最后，我们调用
document.body.appendChild(myDiv)来修改 DOM
这种方法导致浏览器仅重新绘制一次，而不是早期方法中的 3 次。
答案是肯定的！每次使用appendChild()时，我们都是在修改 DOM，这会在浏览器中引起称为回流的事情，它会告诉浏览器某些内容已更改并且浏览器需要重新绘制 HTML。
连续调用appendChild()2 次，则会导致浏览器连续重新渲染 2 次。但是我们将myDiv.appendChild(myP);放在前面，此时div还没被渲染，最终整段代码之后引起渲染一次！
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）