在 JAVASCRIPT 中創建 HTML 元素..

在 JAVASCRIPT 中創建 HTML 元素...

能在 JavaScript 中創建一個 HTML 元素嗎？答案是肯定的，你可以在 JavaScript 中創建一個元素讓我們看看如何？

如果你想在 JavaScript 中創建一個 div 元素——

要在 JavaScript 中創建新元素，我們使用 document.createElement('div')，而不是 div，您可以分配任何 html 標簽，例如 p、h1、h2、h3 等，如果您分配 p 標簽，它將創建一個 p 標簽。

現在，如果你想給它上一堂課，你可以做到——

為了給我們的新 div 一個類，我們使用 variablename.className=‘class_name’ ，如上所示。

現在你也可以給它 id —

為了給 newdiv 一個 id，我們的代碼是 variablename.id=‘id_name’;

現在讓我們看看我們的輸出

現在，從上面的代碼中，我創建了一個帶有類容器和 id newElement 的 div 元素。

還有另一種方法可以在標簽上設置 class 、 id 、 title 、 name ，讓我們來看看。

在這里，我定義了 setAttribute() 并在括號內首先定義了標題，然后定義了標題的名稱。除了標題，您可以指定類、id 或任何名稱

現在我們來看看我們的輸出

您可以清楚地看到，在 div 標簽內，我們的代碼添加了標題，即“新 div”。

現在如果你想在 div 標簽內添加內容怎么辦？例如，在我的 div 元素中，我想添加 Hello medium reader！我怎樣才能做到這一點？下面來看看吧。

在上面的代碼中，我使用 document.createTextNode() 將我的文本分配給變量內容，因此 TextNode 用于為我們的元素提供文本。

所以，我們已經成功地向我們的 div 元素添加了一個文本。

現在，最重要的是，如果您想將內容插入現有的 html 代碼以便在瀏覽器中看到它，您可以通過 insertBefore(newNode, referenceNode) 來完成它的作用是在參考節點之前插入您的節點。

所以在這里我從上面的 html 代碼中創建了一個帶有類容器和 h1 標簽的 div 元素。

現在，我定義了一個名為 maindiv 的變量，并將其分配給具有類容器的 div 元素，并定義了一個變量 h1 并為其分配了 h1 標記。

現在，為了插入我們的節點，我使用了 inserbefore(newNode, referenceNode) ，其中 newNode 是必須插入的節點，即我們的 newdiv ，參考節點是要在其之前插入 newNode 的節點，即我們的 h1 標記。

所以從上面的輸出你可以看到我們已經成功地在瀏覽器中顯示了我們的 div 內容。

JavaScript 是一種非常有效的語言，你可以在 JavaScritp 中做很多事情，這些只是它的基礎。

謝謝你

解如何在 JavaScript 中輕松創建腳本元素并為您的網頁添加豐富的功能。

在 JavaScript 中創建腳本元素：

使用 document.createElement() 方法創建腳本元素。
將元素對象的 src 屬性設置為腳本文件。
使用 appendChild() 方法在 HTML 中包含腳本元素。

考慮這個示例 HTML 標記：

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Coding Beauty Tutorial</title>
  </head>
  <body>
    <div id="box"></div>    <script src="index.js"></script>
  </body>
</html>

以下是我們如何使用 JavaScript 在 HTML 中創建腳本元素：

index.js

const script=document.createElement('script');// use local file
// script.src='script.js';script.src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js';script.async=true;// make code in script to be treated as JavaScript module
// script.type='module';script.onload=()=> {
  console.log('Script loaded successfuly');
  const box=document.getElementById('box');
  box.textContent='The script has loaded.';
};script.onerror=()=> {
  console.log('Error occurred while loading script');
};document.body.appendChild(script);

document.createElement() 方法創建一個由標簽名稱指定的 HTML 元素并返回該元素。通過傳遞一個腳本標簽，我們創建了一個腳本元素。

const script=document.createElement('script');

我們在 script 元素上設置 src 屬性來指定要加載的腳本文件。我們使用 URL 指定遠程文件，但我們也可以使用相對或絕對文件路徑指定本地文件。

// use local file
// script.src='script.js';script.src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js';

通過將 async 屬性設置為 true，瀏覽器不必在繼續解析 HTML 之前加載和評估腳本。相反，腳本文件將被并行加載，以減少延遲并加快頁面的處理速度。

script.async=true;

type 屬性指示文件是什么類型的腳本。如果它是一個 JavaScript 模塊，我們需要將 type 屬性設置為 module 來顯示它。

script.type='module';

有關 script 元素支持的所有屬性的完整列表，請訪問有關 script 元素的 MDN 文檔。

我們監聽 onload 事件，以便在腳本文件成功加載時執行操作。

script.onload=()=> {
  console.log('Script loaded successfuly');
  const box=document.getElementById('box');
  box.textContent='The script has loaded.';
};

我們監聽 onerror 事件，以便在加載腳本出錯時執行不同的操作。

script.onerror=()=> {
  console.log('Error occurred while loading script');
};

appendChild() 方法添加一個 DOM 元素作為指定父元素的最后一個子元素。通過在 document.body 上調用 appendChild()，我們將腳本文件添加到正文中。

document.body.appendChild(script);

要將腳本文件添加到文檔的頭部，我們可以將 document.body 替換為 document.head。

document.head.appendChild(script);

關注七爪網，獲取更多APP/小程序/網站源碼資源！

作元素樣式有兩種方式，一種是操作style屬性，一種是操作className屬性，下面我們分別進行講解。

1. 操作style屬性

除了前面講解的元素內容和屬性外，對于元素對象的樣式，可以直接通過“元素對象.style.樣式屬性名”的方式操作。樣式屬性名對應CSS樣式名，但需要去掉CSS樣式名里的半字線“-”，并將半字線后面的英文的首字母大寫。例如，設置字體大小的樣式名font-size，對應的樣式屬性名為fontSize。

為了便于讀者的學習使用，下面我們通過表1列出常用style屬性中CSS樣式名稱的書寫及說明。

表1 常見的style屬性操作的樣式名

名稱	說明
background	設置或返回元素的背景屬性
backgroundColor	設置或返回元素的背景色
display	設置或返回元素的顯示類型
fontSize	設置或返回元素的字體大小
height	設置或返回元素的高度
left	設置或返回定位元素的左部位置
listStyleType	設置或返回列表項標記的類型
overflow	設置或返回如何處理呈現在元素框外面的內容
textAlign	設置或返回文本的水平對齊方式
textDecoration	設置或返回文本的修飾
textIndent	設置或返回文本第一行的縮進
transform	向元素應用2D或3D轉換

接下來，通過代碼演示如何對元素的樣式進行添加，具體示例如下。

   <div id="box"></div>

   <script>

    var ele=document.querySelector('#box'); // 獲取元素對象

    ele.style.width='100px';

    ele.style.height='100px';

    ele.style.transform='rotate(7deg)';

   </script>

上述第4~6行代碼用于為獲取的ele元素對象添加樣式，其效果相當于在CSS中添加以下樣式。

#box {width: 100px; height: 100px; transform: rotate(7deg);}

2. 操作className屬性

在開發中，如果樣式修改較多，可以采取操作類名的方式更改元素樣式，語法為“元素對象.className”。訪問className屬性的值表示獲取元素的類名，為className屬性賦值表示更改元素類名。如果元素有多個類名，在className中以空格分隔。

接下來，通過代碼演示如何使用className更改元素的樣式。

（1）編寫html結構代碼，具體示例如下。

   <style>

    div {

     width: 100px;

     height: 100px;

     background-color: pink;

    } 

   </style>

   <body>

    <div class="first">文本</div>

  </body>

上述代碼中，第9行給div元素添加first類，并在style中設置了first的樣式，瀏覽器預覽效果如圖1所示。

圖1 初始效果

（2）單擊div元素更改元素的樣式，示例代碼如下。

   <script>

    var test=document.querySelector('div');

    test.onclick=function () {

     this.className='change';

    };

   </script>

上述代碼中，第2行獲取div元素存儲在test對象中。第3~5行為text對象添加onclick單擊事件，第4行執行事件處理程序使用this.className給test對象設置change類名，其中this指的是test對象。

（3）在style中添加change類，樣式代碼如下。

   .change {

    background-color: purple;

    color: #fff;

    font-size: 25px;

    margin-top: 100px;

   }

（4）單擊div盒子，瀏覽器預覽效果如圖2所示。

圖2 單擊后效果

執行上述代碼之后，會直接把原先的類名first修改為change，如果想要保留原先的類名，可以采取多類名選擇器的方式，修改第（2）步的第4行代碼，示例代碼如下。

this.className='first change';

修改之后，在控制臺查看到div元素的類已經修改成了<div class="first change">文本</div>，保留了之前的類名。

在線咨詢

上一篇：單網頁高利潤產品谷歌廣告實操案例（一）
下一篇：前端網頁web開發大神總結的HTML標簽-列表

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

在 JAVASCRIPT 中創建 HTML 元素..

您的項目需求