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