如何使用 javascript 在 DOM 中添加 laravel 組件

Question

我是 laravel 框架的新手。 我創建了一個包含一些文件輸入選項的組件（講座內容） ，並且有一個按鈕 onclick 應該再添加一個（講座內容）組件。 在 DOM 上。

 function addContent() { let newDoc = "@include('inc.lecture-content')"; let extendContent = document.getElementById('addNew').innerHtml; console.log(extendContent); console.log(newDoc); extendContent+=newDoc; document.getElementById('addNew').innerHtml= extendContent; }

 <div class="cariculum-heading my-2"> <h5 class="my-auto py-auto font-weight-normal ">Curriculum </h5> <button class="px-2 btn my-auto py-auto add-content-btn" onclick="addContent()" id="add-content">+ content</button> </div> <div class="content-section" id="addNew"> @include('inc.lecture-content') </div>

但這不適用於 position let newDoc = "@include('inc.lecture-content')"; 它顯示語法錯誤。 誰能幫我解決它。 我在這里做錯了什么

Answer 1

使用clone()

下面的 jQuery 代碼將滿足您的目的。

function addContent()
        {
          var clone = $('#addNew').clone().css('display','block');
          $('#newEle').append(clone);
        }

在刀片文件中再添加一個 div。

<div id="newEle">
</div>

這個新創建的 div 將用於 append 克隆的 div。

 function addContent() { var clone = $('#addNew').clone().css('display','block'); $('#newEle').append(clone); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="cariculum-heading my-2"> <h5 class="my-auto py-auto font-weight-normal ">Curriculum </h5> <button class="px-2 btn my-auto py-auto add-content-btn" onclick="addContent()" id="add-content">+ content</button> </div> <div id="newEle"> </div> <div class="content-section" id="addNew" style="display: none;"> @include('inc.lecture-content') </div>