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

您的主要问题是您在vanilla JavaScript对象上调用JQuery方法。

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

在JQuery中，有 .append() ，但您必须在应该追加新元素的对象上调用.append()，而不是要追加的对象：

＆＃13;

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

＆＃13;

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

＆＃13;

并且还有 .appendTo() ，但您必须在JQuery对象上调用它并将JQuery对象作为要附加的对象传递，而不仅仅是选择器：

＆＃13;

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

＆＃13;

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

＆＃13;

要插入包含某些HTML的字符串，在vanilla JavaScript中，它 .innerHTML ：

＆＃13;

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

＆＃13;

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

＆＃13;

但是，.innerHTML需要构建字符串并且存在安全性和性能问题。使用DOM API， create a new DOM node ，对其进行配置，然后使用 .appendChild() 将其添加到文档中：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用jQuery创建对象：

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

appendTo是一个jQuery方法，你试图在一个vanilla JavaScript对象上使用它。

Answer 3

appendTo是jQuery的一部分，obj需要是jQuery元素。在你的第一个例子中，它是一个字符串，在你的第二个例子中，它是一个（简单的vanilla 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。 <div id="dynamicInput" class="form-group"> <label>Additional Destinations</label> <input type="text" name="waypoints" class="form-control" autocomplete="on" value="{{ $myroute->waypoints }}"> </div>是一个jQuery方法并扩展了.appendTo()对象 - 而在您的情况下$()实际上是 String 。

http://api.jquery.com/appendto/

的基本示例

obj

在jQuery中，您可以使用Object Element构造函数，如：

＆＃13;

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

＆＃13;

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

＆＃13;

或者如果您愿意：

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

Answer 5

只需尝试append('Content')而不是appendTo()。

这应该可以正常工作。

动态添加div及其内容

5 个答案: