JS DOM 编程复习笔记--创建元素、插入元素（四）

小帅的编程笔记
982 阅读3分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

今天我们来学习使用JS来动态创建DOM元素并插入的已有的HTML中。

要创建一个HTML元素，使用 document.createElement() 方法。

let element = document.createElement(htmlTag);

document.createElement() 方法接受一个HTML标签名称并返回Element 类型的新节点。

1) 创建一个div元素

我们先来搞一个空的HTML文档

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS createElement Demo</title>
</head>
<body>

</body>
</html>

然后我们使用 document.createElement() 来创建一个新的 <div> 元素。

接着把div里的内容设置为一个p标签。

要把 <div> 元素插入到HTML中，需要使用appendChild() 方法。

let div = document.createElement('div');
div.innerHTML = '<p>这是一段文字</p>';
document.body.appendChild(div);

完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS createElement Demo</title>
</head>
<body>
  <script>
    let div = document.createElement('div');
    div.innerHTML = '<p>这是一段文字</p>';
    document.body.appendChild(div);
  </script>
</body>
</html>

运行成功后，HTML结构如下图

image-20211020181606920

给div添加ID

如果想给div添加一个ID，将元素的id属性设置为一个值，像这样

let div = document.createElement('div');
div.id = 'content';
div.innerHTML = '<p>这是一段文字</p>';

document.body.appendChild(div);

代码运行后，如图：

image-20211020181921379

给div添加class

给div的className属性设置一个值

let div = document.createElement('div');
div.id = 'content';
div.className = 'note';
div.innerHTML = '<p>这是一段文字</p>';

document.body.appendChild(div);

代码运行后，如图：

image-20211020182107385

给div添加文字

将一段文字添加到div里，我们可以使用innerHTML 属性，像上面一样，或者也可以创建一个新的 Text 节点并将其插入到 div里。

let div = document.createElement('div');
div.id = 'content';
div.className = 'note';

// 创建一个新的Text节点，插入到div元素内
let text = document.createTextNode('我是通过createTextNode创建的文本');
div.appendChild(text);

document.body.appendChild(div);

代码运行后，如图：

image-20211020182420767

插入一个元素到div

插入一个元素到div，我们先创建一个元素然后使用appendChild()方法插入到div内。

let div = document.createElement('div');
div.id = 'content';
div.className = 'note';

// 创建一个H2元素
let h2 = document.createElement('h2');
h2.textContent = '将H2元素插入到div内';
div.appendChild(h2);

document.body.appendChild(div);

代码运行后，如图：

image-20211020182741874

2) 批量创建列表li元素

假如我们有一个列表ul标签，要生存一些li并插入到里面

<ul id="menu">
  <li>首页</li>
</ul>

下面我们通过循环向ul标签内插入3个li元素

const menu = document.querySelector('#menu');
const menuData = ['首页', '产品', '关于我们'];

for (let item of menuData) {
  let li = document.createElement('li');
  li.textContent = item;
  menu.appendChild(li);
}

代码运行后，如图：

image-20211020183253591

3) 创建 script 标签

有时我们可能希望动态引入JavaScript文件，因为如果一开始都加载可能会影响页面的加载速度。所以，我们可以使用 document.createElement() 来创建 script 元素并将其插入到HTML中。

下面我们创建一个script元素，然后将 vue.js 文件加载到页面中

let script = document.createElement('script');
script.src = '//cdn.bootcdn.net/ajax/libs/vue/3.1.5/vue.global.js';
document.body.appendChild(script);

代码运行后，可以看到 vue.js 文件已经成功加载。

image-20211020183902507

我们可以将这个功能封装成一个小函数去使用

function loadJS(url) {
  let script = document.createElement('script');
  script.src = url;
  document.body.appendChild(script);
}

然后直接传入要加载的JS文件地址

loadJS('//cdn.bootcdn.net/ajax/libs/vue/3.1.5/vue.global.js');

要异步加载JavaScript 文件，我们将 script 元素的 async 属性设置为 true

function loadJSAsync(url) {
  let script = document.createElement('script');
  script.src = url;
  script.async = true;
  document.body.appendChild(script);
}

总结

  • document.createElement() 用来动态创建一个新的HTML元素。
  • element.appendChild() 用来将元素插入到现有的元素中。

今天就到这里，明天见。

如果你想跟着我一起复习DOM知识，微信搜索【小帅的编程笔记】，每天更新

avatar
文章
阅读
粉丝