。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。

所以它随便添加了“

有人可以帮我吗？抱歉，拼写和语法错误。

Answer 1

使用innerHTML代替append。

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

追加添加一个textNode。更好的方法是通过生成并插入DOM来实现以下目的：

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

Answer 2

问题是，您实际上是在告诉它向DOM附加字符串，而不是在创建可以插入的元素。

[如果将要添加的html包装在jQuery包装器$('<div class="col-sm-2">....</div>');中，则jQuery将其视为jQuery对象，然后应能够将其插入所需的庄园中。

Answer 3

DEMO

var insertData = '<div class="col-sm-2">'+
        '<div class="thumbnail">'+
            '<a href="/w3images/lights.jpg">'+
              '<img src="" class="img-rounded">'+
            '</a>'+
            '<div class="caption tags">'+
                '<p>titel van project</p>'+
            '</div>'+
        '</div>'+
      '</div>';
 document.getElementById('a').innerHTML = insertData;

<div id="a"></div>

Answer 4

您只能在代码中使用<和>而不是“”。浏览器不会将此字符串识别为html代码，而将其打印为纯文本。