JavaScript 将数据附加到 Div

Harshit Jindal 2023年1月30日 2021年7月3日
  1. 在 JavaScript 中使用 innerHTML 将数据附加到 Div
  2. 在 JavaScript 中使用 appendChild 将数据附加到 Div
  3. 在 JavaScript 中使用 insertAdjacentHTML() 将数据附加到 Div
  4. 使用 jQuery 的 append() 将数据附加到 Div
JavaScript 将数据附加到 Div

本教程介绍如何使用 JavaScript 将数据附加到 div。

在 JavaScript 中使用 innerHTML 将数据附加到 Div

在此方法中,我们首先使用选择器之一选择 div,即 getElementByIdgetElementByTagquerySelector 等。然后我们将数据附加到 div 的 innerHTML 属性。此方法有一个缺点:它会删除所选 div 上的所有现有事件侦听器。它还将销毁包含在其中的所有节点并用新节点替换它们。所有对元素的引用都将丢失。

var targetDiv = document.getElementById('ID');
targetDiv.innerHTML += 'data that you want to add';

在 JavaScript 中使用 appendChild 将数据附加到 Div

与前面的方法一样,我们首先使用其中一个选择器选择 div。但是由于前面方法中讨论的问题,我们使用了 appendChild 而不是 innerHTML。在附加子节点之前,我们必须创建文本节点。

var targetDiv = document.getElementById('ID');
var content = document.createTextNode("data that you want to add");
targetDiv.appendChild(content);

在 JavaScript 中使用 insertAdjacentHTML() 将数据附加到 Div

与第二种方法一样,此方法是第一种方法的更好替代方法。insertAdjacentHTML() 不会重新解析元素,也不会干扰内部的现有元素。它比 innerHTML 快得多。它还可以帮助我们指定插入数据的位置。与之前的方法一样,我们首先选择 div,然后使用 insertAdjacentHTML() 在所需位置添加数据。

var targetDiv = document.getElementById('ID');
targetDiv.insertAdjacentHTML('afterend', 'data that you want to add');

使用 jQuery 的 append() 将数据附加到 Div

append 函数接受需要添加的内容的输入,并且可以使用 jQuery 语法直接在标签上调用。这个方法也有 innerHTML 方法的所有缺点。

$( ".divd" ).append( "<p>Test</p>" );
Harshit Jindal avatar Harshit Jindal avatar

Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.

LinkedIn

相关文章 - JavaScript DOM