.append() 将 html 添加为文本

Question

我正在使用 javascript 将 html 添加到我的 . 我做了一个循环，围绕所有项目。有多个项目，每个项目都有多张图片。

第一部分在 div 中创建第一个项目标题，该项目标题获取 id（项目名称）和第一张图片。

$( ".projectbeeldcontainer" ).append(


'</div>'+
     '<h1 class="projecttitel" id="'+name+'">'+name+'</h1>'+
     '<div class="row dashboardrow" id="'+name+'id">'+
      '<div class="col-sm-2">'+
        '<div class="thumbnail">'+
            '<a href="/w3images/lights.jpg">'+
              '<img src="projectbeelden/'+name+'/'+decodeURI(image)+'" class="img-rounded">'+
            '</a>'+
            '<div class="caption tags">'+
                '<p>titel van project</p>'+
            '</div>'+
        '</div>'+
      '</div>';

    );

之后，脚本将检查下一个图像的项目名称是否已经存在。如果它确实存在（因为我们用上面的代码添加了它），那么它会在我们创建的项目 div 中插入一个新的 div：

document.getElementById(name+'id').append(


'<div class="col-sm-2">'+
        '<div class="thumbnail">'+
            '<a href="/w3images/lights.jpg">'+
              '<img src="projectbeelden/'+name+'/'+decodeURI(image)+'" class="img-rounded">'+
            '</a>'+
            '<div class="caption tags">'+
                '<p>titel van project</p>'+
            '</div>'+
        '</div>'+
      '</div>'




      );

我现在遇到的问题是第一行代码成功创建了 div 和图像。第二个代码适用于 98%。

它确实识别带有 id 的 div 并将内容放入其中。但问题是它在我的第一行之前和之后添加了引号。所以看起来它认为它是一个字符串而不是 html。

所以它实际上在我的页面上添加了“<div ...”。

有人可以帮我吗？抱歉拼写和语法不好。

Answer 1

使用 innerHTML 而不是 append。

document.getElementById(name+'id').innerHTML += "<div> put your html </div>";

Append 添加一个 textNode。更好的方法是通过生成它并插入到 DOM 中：

var el = document.createElement("div");
el.appendChild(document.createTextNode("Put yout HTML"));
document.getElementById(name+'id').appendChild(el);