javascript核心技术（二十七）原生JS的标签节点操作(二) 添加节点到DOM树

人亦已歌 · 发表于 2023-1-25 12:57:38

在上一节中我们在内存中创建出一个<div>hello</div>的标签，下面我们让这个标签显示在页面上。
一、通过字面量方式创建的标签，添加到DOM树（即页面）中的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <span id="span1"></span>
        <span id="span1"></span>
        <span id="span1"></span>
    </div>
</body>
<script>
    var tag1 = '<div name="ex">添加到box的后面</div>';
    var tag2 = '<div name="ex">添加到box的前面</div>';
    var tag3 = '<div name="ex">添加到box里面的最后</div>';
    var tag4 = '<div name="ex">添加到box里面的最前</div>';
    //通过字面量创建的标签要这样添加
    var box=document.getElementById('box');
    box.insertAdjacentHTML('afterEnd',tag1);//添加到box的后面
    box.insertAdjacentHTML('beforeBegin',tag2);//添加到box的前面
    box.insertAdjacentHTML('beforeEnd',tag3);//添加到box里面的最前
    box.insertAdjacentHTML('afterBegin',tag4);//添加到box里面的最后
</script>
</html>

在以上代码中我们用到了insertAdjacentHTML方法，该方法有两个参数，第一个参数是添加的位置，第二个参数是要添加的字面量标签，即字符串类型的标签数据。
其中，第一个参数有4个，分别是afterEnd、beforeBegin、beforeEnd、afterBegin，以上代码中我们都做了注解，这里不再赘述。
执行结果如下：
javascript核心技术（二十七）原生JS的标签节点操作(二) 添加节点到DOM树

javascript核心技术（二十七）原生JS的标签节点操作(二) 添加节点到DOM树

二、通过JS动态创建的object类型的节点添加到页面中的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <span id="span1"></span>
        <span id="span1"></span>
        <span id="span1"></span>
    </div>
</body>
<script>
    //1、JS语法创建一个标签
    var tag = document.createElement('div');
    //2、创建一个文本节点
    var text = document.createTextNode('hello');
    //3、将创建的文本节点 放到标签中
    tag.appendChild(text);
    // 通过js创建的标签要这样添加
    var box = document.getElementById('box'); 
    box.appendChild(tag); 
</script>
</html>

执行结果如下：