Javascript创建元素
浏览器不仅提供了Javascript语言可以选择HTML元素的方法,还提供了创建了HTML元素插入到body元素中的方法,你可以基本不写HTML和CSS代码,利用Javascript语言创建元素,给元素添加样式属性, 这样的话使用纯Javascript代码可以创建一个页面成为可能。
创建p元素
<body> <p>innerHTML属性表示段落p元素开始结束标签之间的内容</p> </body>
下面Javascript代码的作用就是创建一个p元素,和上面的代码实现的结果是一样的。
<script> // 创建一个p元素 let p = document.createElement("p"); // 给p元素添加文字内容 p.innerHTML = "innerHTML属性表示段落p元素开始结束标签之间的内容"; // p元素作为body父元素的子对象插入 document.body.appendChild(p); </script>
代码解析
格式:document.createElement("元素名")
createElement()方法和getElementById()一样都属于document对象,区别在于一个是选择元素,一个是创建元素,执行方法返回的结果就代表元素本身,所有元素对象统称为Element对象。 createElement()方法的参数就是你要创建的元素的元素名加上引号标识。
innerHTML是元素对象的属性,代码元素开始标签和结束标签里面的内容,在编写html代码的时候一般不会在标签里面写innerHTML属性,浏览器引入innerHTML属性的目的是为了Javascript方便的更改或添加 元素开始结束标签之间的内容。
document.body表示选择body元素,当然你也可以为body添加一个id,然后通过getElementById()方法选择body元素,由于body元素每个文件中都是必备的,使用频率高,所以专门引入了document.body这种写法, 把body元素作为document对象的属性,返回的属性值和通过方法getElementById()返回的值都是元素对应的对象。
appendChild()和innerHTML一样属于元素Element对象,区别是appendChild()是一个方法,可以把你创建的元素作为子元素插入到其它父元素里面,如果父元素还有其它子元素,将要被插入的子元素,按照先来后到的原则排列。
创建span元素
下面代码的作用是在上面代码的基础上,在p元素标签里面插入一个span元素,字体颜色红色。
// p元素里面再嵌入span元素,字体红色 let span = document.createElement("span"); span.innerHTML = "格物致知"; span.style.color = "red"; p.appendChild(span);
使用innerHTML代替appendChild也很方便,可以节约代码,使用+=运算符在原来内容的基础上在增加内容, 把span标签语句以字符串的形式传入到p标签里面,这时候要注意span元素里面的引号要使用转义字符反斜杠进行转义,否则会与字符串的标识符号""冲突。
// p元素里面再嵌入span元素,字体红色(方法2) p.innerHTML += "<span style=\"color: red\">格物致知</span>";
插入元素方法
方法 | 作用 |
父元素.appendChild("子元素") | 父元素中插入子元素,先来后到排列插入 |
元素A.insertBefore("元素B") | 把元素B放在元素A前面,并列关系,非父子关系 |