試圖添加一個div到使用香草js的文檔

Question

我想用香草JavaScript向文檔添加一個元素，但它給了我這個錯誤：「未捕獲的DOMException：未能在'Document'上執行'createElement'：提供的標籤名稱（''）不是有效的名稱。「

這是我所有的js代碼：

function newProject(root,img) { 
 
    const project = document.createElement("<div class='element'><a href='" + root +"'><img src='"+ img +"'></a></div>"); 
 
    const element = document.querySelector(".projects"); 
 
    element.appendChild(project); 
 
} 
 

 
newProject('../projects/periodic-table/tabla-periodica.html', '../img/tabla-valencias.png');

Answer 1

document.createElement將只創建一個單一的空元素，例如，<div></div>，並且只需要標記名稱（div）作爲參數。所以，你應該手動構建你的內容是這樣的：

const project = document.createElement('div'); 
project.className = 'element'; 

const projectLink = document.createElement('a'); 
projectLink.href = root; 
project.appendChild(projectLink); 

const image = document.createElement('img'); 
image.src = img; 
project.appendChild(image); 

---

_{您還可以使用.innerHTML直接插入HTML內容轉換爲一個節點，但對於動態內容（即通過變量，如產生你的案件）。我建議不要這樣做，因爲這並不能避免變量的內容，並且會讓你在代碼中受到XSS攻擊。}