`.append()`将HTML添加为文本。

Question

我正在使用JavaScript向我的````标签添加HTML代码。我编写了一个循环，遍历所有项目。这里有多个项目，每个项目中都有多张图片。

第一部分创建了第一个项目标题，并将其放置在一个div中，该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 ..."。

请问有人能帮我吗？对于糟糕的拼写和语法，我表示抱歉。

- Onovar

---

你正在使用 DOM 元素的 append() 方法，而不是 jQuery 的 append 方法，后者会将给定的字符串原样附加。 - Arun P Johny

没错，第一段代码中为什么要使用jQuery，而第二段却使用本地DOM方法，这有点令人困惑。 - JJJ

使用jQuery $('#'+name+'id').append( - Arun P Johny

为什么不在第二个版本中也使用jQuery呢？ - Arun P Johny

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);

- Markus Zeller

---

谢谢您，Zeller先生。我知道我没有用“干净”的方式来做。innerHTML可以完成任务。 - Onovar

Answer 2

问题在于你实际上是在告诉它将一个字符串附加到DOM，而不是创建一个可以插入的元素。

如果你将要附加的HTML包装在jQuery包装器$('<div class="col-sm-2">....</div>');中，那么它将被jQuery视为一个jQuery对象，然后应该能够按照你需要的方式插入。

- Adrian Roworth

Answer 3

这对我来说是个工作

var stringToHTML = function (str) {
        var parser = new DOMParser();
        var doc = parser.parseFromString(str, 'text/html');
        return doc.body;
    };    
$( ".projectbeeldcontainer" ).append(stringToHTML('<p>text</p>'))

- Joandysson Gama

Answer 4

您可以在代码中使用< 和> 代替 "<" 和 ">" 符号。浏览器将不会将其识别为 HTML 代码，而是按纯文本输出。

- Eugene

Answer 5

演示

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>

- Anil Panwar

---

这将替换内容，而不是追加。 - JJJ

@markus的回答将会追加它，因此得到了赞同:) 你是正确的，它将替换HTML。 - Anil Panwar