Question

我在用Javascript创建新的Elementor块（在这种情况下是从URL填充到列中的图像）时遇到了困难。

我当前在页面中使用html块编写脚本，并且为单击按钮设置了动作。但是，我一直找不到通过代码在网页上生成新的elementor块的示例。

请问有一个很好的例子吗？

如果这是一个新手问题，我表示歉意。

这就是我想要做的：

1）单击按钮后，清除页面的其余部分

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

3）在各列的每个部分中创建一个图像块

4）用来自URL的图像填充每个图像块

谢谢！

QNetworkConfigurationManager#defaultConfiguration().bearerType() == QNetworkConfiguration::BearerWLAN

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

我不知道您如何获取图像，但希望它能对您有所帮助，当然您可以对此进行改进。

如何使用JavaScript创建Elementor块

1 个答案: