为什么 jQuery 选择 DOM 替换而不是追加？答案

【问题标题】：Why is jQuery select DOM replacing rather than appending?为什么 jQuery 选择 DOM 替换而不是追加？
【发布时间】：2019-03-08 05:18:08
【问题描述】：

我想创建一个单一的选择 DOM 并使用不同的属性多次附加它。这是我的代码。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="foo"></div>

    <script>
        $(document).ready(function(){
            var select = $('<select></select>').attr('class', 'form-control input-sm serial_no');
            select.append('<option value="hello">Hello</option>');
            $('#foo').append(select.attr('id','one'));
            $('#foo').append(select.attr('id','two'));
        });
    </script>

</body>

它只附加一个 ID 为 2 的选择。我怎样才能实现它？

【问题讨论】：

select 只有一份副本。所以你追加它，然后当你尝试再次追加它时，它会删除第一个实例，然后再次追加。您需要两个 select 实例——要么通过创建两个元素，要么使用答案中提到的@somani clone。

标签： javascript jquery html

【解决方案1】：

你可以克隆它并附加它

select.clone(true)

$(document).ready(function(){
            var select = $('<select></select>').attr('class', 'form-control input-sm serial_no');
            select.append('<option value="hello">Hello</option>');
            debugger
            $('#foo').append(select.clone(true).attr('id','one'));
            $('#foo').append(select.clone(true).attr('id','two'));
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foo"></div>

【讨论】：

我用真正的clone(true) 进行克隆，如果你的元素有事件，它也会克隆事件，如果不需要，你可以从克隆中删除true

【解决方案2】：

它不是附加的，因为它是同一个元素。您只是更改元素的属性并再次附加，但元素是相同的。您必须创建另一个选择元素并附加它

        $(document).ready(function(){
            var select = $('<select></select>').attr('class', 'form-control input-sm serial_no');
            select.append('<option value="hello">Hello</option>');
             var select1 = $('<select></select>').attr('class', 'form-control input-sm serial_no');
            select1.append('<option value="hello">Hello</option>');
            $('#foo').append(select.attr('id','one'));
            $('#foo').append(select1.attr('id','two'));
        });

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="foo"></div></body>

【讨论】：