javascript - 如何使用 javascript 创建 elementor block

Question

我在从 Javascript 创建新的 Elementor block (在本例中是我从 URL 填充并插入列中的图像)时遇到困难。

目前，我的页面中有使用 html block 的脚本，并且设置了单击按钮时的操作。但是，我一直无法找到通过代码在网页上生成新元素或 block 的示例。

有没有一个很好的例子可以帮助我做到这一点？

如果这是一个新手问题，我很抱歉。

这就是我正在尝试做的事情:

1) 单击按钮时，清除页面的其余部分

2) 生成一个新的包含 4 个部分的分组列

3) 在列的每个部分中创建 1 个图像 block

4) 使用 URL 中的图像填充每个图像 block

提前致谢!

<script> 
document.addEventListener("DOMContentLoaded", function(event) { 
    jQuery('.ShowAllImages').click(function(){ 
        ShowAllImages();
    });
});

function ShowAllImages() {
    //Clear the page below the button
    //Create x amount of grouping sections within page
    //Create y new elementor images in those sections
    //Populate those y elementor image blocks with images   
}
</script>

Answer 1

首先，如果您想清除页面，我建议您使用具有唯一 ID 的主 div 或部分

<section id="main">
    <div id="mySections" class="row"> </div>
</section>

因此，如果我了解您想要 4 个部分，您可以在此处附加或删除您的内容，您可以使用 bootstrap 或您自己的 css 类在 bootstrap 中执行该示例:

(function (){
function ShowAllImages() {
  clear();
  addImages();
}
function clear() {
    let parent = document.getElementById('main');
    let child = document.getElementById('mySections');
    parent.removeChild(child);
}
function addImages () {
    let parent = document.getElementById('main');
    let child1 = document.createElement('div');
    child1.classList.add('col-md-3');
    let child2 = document.createElement('div');
    child2.classList.add('col-md-3');
    let child3 = document.createElement('div');
    child3.classList.add('col-md-3');
    let child4 = document.createElement('div');
    child4.classList.add('col-md-3');

    // then you can add your images in each section with

    let img1 = document.createElement('img');
    child1.appendChild(img1);

    // ... 
    parent.appendChild(child1);
    parent.appendChild(child2);
    parent.appendChild(child3);
    parent.appendChild(child4);
}
}())

我不知道你是如何获取图像的，但希望它有帮助，当然你可以改进它。