试图添加一个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攻击。}