JS在页面上创建元素

创建元素

1.document.write
不常用，使用后会覆盖原本的页面内容

document.write("<h1>我是标题</h1>");//添加的内容

覆盖原理：
默认情况下，页面加载会形成一个文档流，当页面所有内容加载完毕之后，这个文档流(默认的文档流)就会关闭，
当触发某个事件，调用document.write向页面添加内容的时候，就会形成新的文档流，就会覆盖原本的页面内容
不覆盖的情况：默认文档流里没有关闭
覆盖的情况：默认文档流已经关闭，形成了新的文档流

2.innerHTML
也不常用

console.log(document.body.innerHTML);
document.body.innerHTML += "<h1>我是标题</h1>"

3.document.createElement(“标签名”)
特点：
(1)默认创建的是空标签
(2)创建值存在于内存中，需要手动添加到页面上
添加步骤：
a.创建一个空标签

var h1=document.createElement("h1");

b.设置标签属性

h1.innerText="我是标题"

c.添加到页面上

document.body.appendChild(h1);

性能比较：
使用innerHTML向页面添加100个标签创建100个约15ms; 1000个约1.2s
使用document.createElement添加创建100个标签约0.6ms; 1000个约3ms

字符串的恒定性

var str="www";
console.log(str.length);//3

str[1]="o";
console.log(str);//www

var str2=str[1];
console.log(str2);//w

使用字符串的API：不要把变量赋值和字符串的恒定性搞混

	var str1="123";
	var str=str.replace("1","6")
	console.log(str1);//123
	console.log(str2);//623

来源：CSDN

作者：weixin_45060872

链接：https://blog.csdn.net/weixin_45060872/article/details/104846190

标签

文档流