javascript - 尝试用 <div> 替换 <video>

Question

我有 <video>在 View 中

这是代码

<p style="text-align: center;">
        <video id="preview" controls style="border: 1px solid rgb(15, 158, 238); height: 280px; width: 300px;" muted="muted" ;></video>
    </p>

和<div>

这是代码

<div id="container" style="padding:1em 2em; width: 350px; text-align: center;margin-left: 100px;margin-top: 50px;"></div>

我试着用这样的div替换video

$('#next').click(function () {
    $('#container').replaceWith($('#preview'));

它取代了，但像隐藏的一样

为什么会这样？

更新

这是我打开 View 时的样子

我点击按钮 Запись并录制视频

这是屏幕

我点击按钮 Остановить在我会看到录制的视频

当我点击 Далее按钮需要替换为

但是我看到了这个

Answer 1

试试这段代码

$('#next').click(function () {
    $('#preview').replaceWith($('#container'));
})

div#next {
    background-image: linear-gradient(to bottom,#428bca 0,#3071a9 100%);
    background-repeat: repeat-x;
    border-color: #2d6ca2;
    width: 51px;
    height: 21px;
    color: #fff;
    border-radius: 5px;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p style="text-align: center;">
        <video id="preview" controls style="border: 1px solid rgb(15, 158, 238); height: 280px; width: 300px;" muted="muted" ;></video>
    </p>
    <div id="next">
    next
    </div>
    
    <div id="container" style="width: 350px; text-align: center;margin-left: 100px;border: 1px solid rgb(15, 158, 238); height: 280px; width: 300px;">div</div>