如何使用jquery永久添加元素，然后它将增加数字，例如Cam 1，Cam 2，Cam 3等。使用iframe

Question

So，我的网站上有视频流。我有一个默认的Cam 1，这是代码：

<div class="card mb-3">
    <div class="card-header">
        <i class="fa fa-video-camera"></i> &nbsp;CCTV
        <span class="float-right" id="addcam"><a href="#" onclick="addCamera();">+ add camera</a></span>
    </div>
    <div class="card-body" id="camera-body">
        <p><strong>Cam 1</strong></p>
        <iframe id="cam1" class="container-fluid mb-4" height="500" src="https://www.youtube.com/embed/D-EcyYkv-mU"></iframe>
    </div>
</div>

如果我点击（+添加摄像头），它将调用js函数addCamera();

这是我的js脚本中的代码（jquery）：

<script>
        function addCamera() {
            <?php $camNumber = 1; $camNumber += $camNumber; ?>
            $("div#camera-body").append("<hr id=\"remove\" style=\"border: 0.2px solid black;\">");
            $("div#camera-body").append("<p id=\"remove\"><strong><?php echo h("Cam " . $camNumber) ?></strong><a href=\"#\" class=\"float-right mr-3\" onclick=\"removeCamera();\" style=\"color:black;\">X</a></p>");
            $("div#camera-body").append("<iframe id=\"remove\" class=\"container-fluid mb-4\" height=\"500\" src=\"https://www.youtube.com/embed\"></iframe>");
        }

        function removeCamera() {
            $("iframe#remove, p#remove, hr#remove").remove();
        }
</script>

添加时如何增加凸轮的数量？并且我在添加相机时在右上角放了一个（x），因此如果你想删除你添加的摄像头，还有一个选项。但是不会删除第一个/默认凸轮。

请帮忙，谢谢！

Answer 1

我现在正在使用它，但仅在摄像机编号上增加。这是我的代码：

<script>
        var camNum = document.getElementsByTagName('iframe');
        camNum.length;
        function addCamera() {
            $("div#camera-body").append("<p><strong>Cam " + camNum.length + "</strong></p><iframe class=\"container-fluid mb-4\" height=\"500\" src=\"https://www.youtube.com/embed\"></iframe>");
        }
</script>