動態添加div及其內容

Question

<div class='tagstore' id='tagstore'>
    <div class='tagsingle' title='delete'>323</div>
    <div class='tagsingle' title='delete'>525</div>
</div>

我需要添加以下內容：

<div class='tagsingle' title='delete'>some variable</div>

JS

var a = 'lorem';
var obj = "<div class='tagsingle' title='delete'>" + a + "</div>";
obj.appendTo('#tagstore');

錯誤： obj.appendTo is not a function...

還嘗試了：

var obj = document.createElement('div');
obj.className = 'tagsingle';
obj.appendTo('#tagstore');

錯誤： obj.appendTo is not a function...

有什么幫助嗎？

Answer 1

您的主要問題是您要在普通JavaScript對象上調用JQuery方法。

有很多方法可以完成您想做的事情：

在JQuery中，有.append() ，但是您必須在應將新元素附加到的對象（而不是要附加的對象.append()上調用.append() ：

 var a = 'lorem'; var obj = "<div class='tagsingle' title='delete'>" + a + "</div>"; $("#tagstore").append(obj); // Or, you can combine the creation of the string and the append: $("#tagstore").append("<div class='tagsingle' title='delete'>" + a + "</div>"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='tagstore' id='tagstore'> <div class='tagsingle' title='delete'>323</div> <div class='tagsingle' title='delete'>525</div> </div> 

並且，還有.appendTo() ，但是您必須在JQuery對象上調用它，並傳遞一個JQuery對象作為要附加到的對象，而不僅僅是選擇器：

 var a = 'lorem'; var obj = "<div class='tagsingle' title='delete'>" + a + "</div>"; $(obj).appendTo($('#tagstore')); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='tagstore' id='tagstore'> <div class='tagsingle' title='delete'>323</div> <div class='tagsingle' title='delete'>525</div> </div> 

要在原始JavaScript中插入包含HTML的字符串，它是.innerHTML ：

 var a = "Lorem"; document.getElementById("tagstore").innerHTML += "<div class='tagsingle' title='delete'>" + a + "</div>"; 

 <div class='tagstore' id='tagstore'> <div class='tagsingle' title='delete'>323</div> <div class='tagsingle' title='delete'>525</div> </div> 

但是， .innerHTML需要構建字符串，並且存在安全性和性能問題。 使用DOM API，您可以創建一個新的DOM節點 ，對其進行配置，然后使用.appendChild()將其添加到文檔中：

 var a = 'lorem'; var obj = document.createElement("div"); obj.classList.add('tagsingle'); obj.title='delete'; obj.textContent = a; document.getElementById("tagstore").appendChild(obj); 

 <div class='tagstore' id='tagstore'> <div class='tagsingle' title='delete'>323</div> <div class='tagsingle' title='delete'>525</div> </div> 

Answer 2

使用jQuery創建對象：

$('<div/>').addClass('tagsingle').appendTo('#tagstore');

appendTo是一個jQuery方法，您正在嘗試在普通JavaScript對象上使用它。

Answer 3

appendTo是jQuery的一部分，而obj必須是jQuery元素。 在第一個示例中，它是一個字符串，在第二個示例中，它是一個（簡單香草js）元素。

如果您想使用jQuery並創建一個jQuery元素，只需將字符串用$("...") 。

 var a = 'lorem'; var obj = $("<div class='tagsingle' title='delete'>" + a + "</div>"); obj.appendTo('#tagstore'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='tagstore' id='tagstore'> <div class='tagsingle' title='delete'>323</div> <div class='tagsingle' title='delete'>525</div> </div> 

Answer 4

您正在混合使用jQuery和原始JS。 .appendTo()是一個jQuery方法，它擴展了$()對象-在您的情況下obj實際上是一個String 。

來自http://api.jquery.com/appendto/的基本示例

$( "<p>Test</p>" ).appendTo( ".inner" );

在jQuery中，您可以使用Object Element構造函數，例如：

 $("<div/>", { text: "lorem", "class": "tagsingle", title: "delete", appendTo: '#tagstore' }); 

 <div class='tagstore' id='tagstore'> <div class='tagsingle' title='delete'>323</div> <div class='tagsingle' title='delete'>525</div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

或者，如果您喜歡：

var text = "lorem";
var HTMLString = '<div class="tagsingle" title="delete">'+ text +'</div>';
$(HTMLString).appendTo('#tagstore') // Notice the wrapping $()

Answer 5

只需嘗試append('Content')而不是appendTo() 。

這應該工作正常。