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

最新推荐文章于 2024-08-26 17:50:05 发布

原创最新推荐文章于 2024-08-26 17:50:05 发布 · 778 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #dom

小帅的编程笔记专栏收录该内容

117 篇文章

订阅专栏

本文介绍了如何使用JavaScript动态创建div、li元素，添加ID、class，插入文本和子元素，并演示了批量创建列表项及异步加载script。掌握createElement(), appendChild()和元素属性设置技巧。

今天我们来学习使用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结构如下图

给div添加ID

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

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

document.body.appendChild(div);

代码运行后，如图：

给div添加class

给div的className属性设置一个值

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

document.body.appendChild(div);

代码运行后，如图：

给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);

代码运行后，如图：

插入一个元素到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);

代码运行后，如图：

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);
}

代码运行后，如图：

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 文件已经成功加载。

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

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);
}