解决思路

1.创建元素

1
document.createElement('span')

2.找到父级元素

1
document.querySelector('.parent')

3.在指定位置插入元素

1
2
3
4
// 在父级元素里最前面动态添加元素
       parent.insertBefore(span, parent.childNodes[0]);
// 在父级元素里最后面动态添加元素
       parent.appendChild(span1)

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="parent">
        <span>你好吗</span>
    </div>
</body>

</html>
<script>
    window.onload = function () {
        var span = document.createElement('span');
        span.innerHTML = "你好世界"

        var span1 = document.createElement('span');
        span1.innerText = 'Hello,world'

        var parent = document.querySelector('.parent');
        // 在父级元素里最前面动态添加元素
        parent.insertBefore(span, parent.childNodes[0]);
        // 在父级元素里最后面动态添加元素
        parent.appendChild(span1)
    }
</script>