尝试将<video>替换为<div>

Question

我在视图中有<video>

这是代码

<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替换视频

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

它取代了，但像隐藏

为什么呢？

更新

以下是我打开View

时的喜好

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

这是屏幕

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

当我点击Далее按钮时，需要将其替换为

但我明白这一点

Answer 1

试用此代码

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;