如何使用javascript创建元素块?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (24)

我很难从Javascript创建新的Elementor块(我从URL填充图像,插槽插入列中,在本例中)。

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

有没有一个很好的例子我可以看到这样做?

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

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

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

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

3)在列的每个部分内创建1个图像块

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

提前致谢!

<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>
提问于
用户回答回答于

首先,如果想要清除页面,我建议使用带有唯一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);
}
}())

不知道你是如何获得图像但希望它有所帮助,当然你可以改进这一点

扫码关注云+社区

领取腾讯云代金券