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前面,并列关系,非父子关系