Question

我没有更多关于jquery的动手。我想获取div的内容并将相同的内容附加到div，但它添加了多个项目。

可能是这段代码清楚地解释了我的问题。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var data = $('#xyz').html();
        $(data).appendTo("#xyz");
    });
});
</script>
</head>
<body>
<span id="xyz"><p>Test</p></span>
<button>ADD</button>
</body>
</html>

我正在使用选择器xyz的内容并将内容添加到同一个选择器，该选择器正在工作，但它增加了两倍的时间。

当前输出

测试

添加

单击添加输出后

将

测试

添加

再次单击添加输出后将

测试

添加

但我希望它是

测试

添加

不是4只测试3测试

任何人都可以帮我解决这个问题。

Answer 1

确保在事件处理程序之前捕获范围的内容：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var data = $('#xyz').html();
    $("button").click(function(){
        $(data).appendTo("#xyz");
    });
});
</script>
</head>
<body>
<span id="xyz"><p>Test</p></span>
<button>ADD</button>
</body>
</html>

否则它会在您点击时获取内容，其中包括上一次点击添加的内容

Answer 2

正如我在评论中提到的，这是正确的行为，因为每次拨打5.8g - (1.1g + 2.6g) = 2.1g时，您都会获得.html()的不断变化的全部内容。例如：

首次加载，#xyz将返回：

.html()

首先，Test将返回：

.html()

第二个ADD，Test Test将返回：

.html()

每次按ADD时，您都会附加Test Test Test个新元素。如果您希望每次只添加一行x，check this out。

Answer 3

试试这个，它对我有用。

$(document).ready(function () {
    $("button").click(function () {
        var data = $('#xyz p')[0].outerHTML;
        $(data).appendTo("#xyz");
    });
});

获取div的html并将相同的内容附加到div但只包含第一个元素

3 个答案: