javascript - 如何使用 Javascript 将动态创建的元素保存到 json？

Question

我有一个由用户自动创建的简单 block ，我希望该元素在创建后自动保存。

HTML

 <div class="main-container">
   <ul class="menu-options">
      <li id="btn-add-movie-block" class="menu-option">Add movie
    block
      </li>
   </ul>
 </div>

JavaScript 文件

var jsonData =json.parse('{"movies:[]"}');

function addMovieBlock() {
    var newMovie = $('<div id="movie-block">New Movie</div>');
    $(".main-container").append(newMovie);
}    

$("#btn-add-movie-block").on("click", function () {
    addMovieBlock();
}

<ul class="menu-options">
    <li id="btn-add-movie-block" class="menu-option">Add movie
        block</li>
</ul>

我只想将此 block 保存到上面的 JSON 数据中？如何使用简单的方法实现这一目标？

Answer 1

您的 JSON 解析格式不正确，请更改为 var jsonData =JSON.parse('{"movies":[]}');

可以通过push添加jsonData.movi​​es.push(newMovie);

var jsonData =JSON.parse('{"movies":[]}');

function addMovieBlock() {
    var newMovie = $('<div id="movie-block">New Movie</div>');
    $(".main-container").append(newMovie);
    jsonData.movies.push(newMovie);
    console.log(jsonData)
}    

$("#btn-add-movie-block").on("click", function () {
    addMovieBlock();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-container">
   <ul class="menu-options">
      <li id="btn-add-movie-block" class="menu-option">Add movie
    block
      </li>
   </ul>
 </div>




<ul class="menu-options">
    <li id="btn-add-movie-block" class="menu-option">Add movie
        block</li>
</ul>