如何追加到节点中的文件? - Javascript

在Javascript中操作DOM节点时，有时我们需要动态修改或追加文件（如图片、音频、视频等）内容到指定节点中。本文将介绍如何使用Javascript追加到节点中的文件。

方法一：使用innerHTML方法

innerHTML方法可以将HTML代码或纯文本追加到指定节点中，也可以覆盖节点原有的内容。

// 获取目标节点
var node = document.getElementById('target');
// 追加HTML代码到节点中
node.innerHTML += '<img src="image.jpg">';
// 追加纯文本到节点中
node.innerHTML += 'Hello World';

在上述示例中，我们先获取了一个id为'target'的节点，然后使用innerHTML方法追加了一张图片和一段文本到该节点中。

方法二：使用appendChild方法

appendChild方法可以将节点或HTML元素追加到指定节点的子节点中，如果要同时追加多个节点或元素，需要使用循环语句。

// 获取目标节点
var node = document.getElementById('target');
// 创建新节点
var imgNode = document.createElement('img');
// 设置新节点的属性
imgNode.src = 'image.jpg';
// 将新节点追加到目标节点中
node.appendChild(imgNode);

在上述示例中，我们先获取了一个id为'target'的节点，然后创建了一个img节点，并设置了其src属性为'image.jpg'，最后使用appendChild方法追加到该节点中。如果需要同时追加多个节点，可以使用类似以下的循环语句：

// 获取目标节点
var node = document.getElementById('target');
// 创建新节点数组
var nodes = [
  document.createElement('img'),
  document.createElement('audio'),
  document.createElement('video')
];
// 循环设置新节点的属性
nodes.forEach(function(n) {
  switch(n.tagName.toLowerCase()) {
    case 'img': n.src = 'image.jpg'; break;
    case 'audio': n.src = 'audio.mp3'; break;
    case 'video': n.src = 'video.mp4'; break;
  }
});
// 循环将新节点追加到目标节点中
nodes.forEach(function(n) { node.appendChild(n); });

以上就是使用Javascript追加到节点中的文件的方法，希望对你有所帮助！