How to load several div elements?

Question

Say I have a load button on my website that always if the user pushes the button loads new items. The field which should be loaded looks like that:

.main-box {
    background-color: #ffffff;
    height: 130px;
    display: flex;
    width: 798px;
    border-right: solid;
    border-left: solid;
    border-bottom: solid;
    border-color: #E6E6E6;
}

.text-in-main-box{
    font-weight: bold;
    font-family: rob;
    width: 60%;
    padding: 7%;
    display: flex;
    vertical-align: middle;
}

.container-for-button-in-main-box{
    width: 40%;
    display: flex;
    vertical-align: middle;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.button-in-main-box{
    display:inline-block;
    padding:0.8em 1.2em;
    margin:0 0.3em 0.3em 0;
    box-sizing: border-box;
    text-decoration:none;
    font-family:rob;
    font-weight:bold;
    color:#ffffff;
    background-color:#34E034;
    text-align:center;
    transition: all 0.2s;
    font-size: 14px;
    border-radius: 4em;
}

 <div class="main-box">
            <div class="text-in-main-box">Sage “Hallo, Welt" mit Python</div>
            <div class="container-for-button-in-main-box"><span class = button-in-main-box>Löse Aufgabe</span></div>
        </div>

How can I add more then one div which should load by klick on the button. I get it for one simple div which should load. But how can I add my whole code block (the div which I send) into an load button?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Load more</title>
    <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
</head>
<body>
<h1>Load more</h1>
<div id="content"></div>
<button id="lmbutton" onclick="loadmore()">Load More</button>
<script>
    var items = ["one", "twp", "three", "four", "five", "six", "seven", "eight", "nine", "ten"]
    var currentindex = 0
    function loadmore(){
    var maxresult = 2
        for(var i = 0; i < maxresult; i++){
            if(currentindex >= items.length){
                $("#lmbutton").hide()
                return
            }
            $("#content").append("<div>"+items[i+currentindex]+"</div>")
        }
        currentindex += maxresult
    }
    loadmore()
</script>
</body>
</html>

I believe you are looking for this StackOverflow answer https://stackoverflow.com/a/40956816/10397316 I would check out the answers beneath that one as well, there are many ways to do what you are asking. If it were me, I would put all of the elements you want to be generated into one div and add one event listener to load that one div with all of the elements in it just to keep it simple. — Jake, Sep 22 '21 at 05:52

score 0 · Answer 1 · answered Sep 22 '21 at 06:55

Instead of using append() I made a simple solution with innerHTML and forEach() that just adds strings to the content element. In the end I change the class name of content to hide it.

var content = document.getElementById('content');
var lmbutton = document.getElementById('lmbutton');

var items = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"];

lmbutton.addEventListener('click', e => {
  items.forEach(item => {
    content.innerHTML += `<div>${item}</div>`;
  });
  lmbutton.classList.add('hide');
});

.hide {
  display: none;
}

<h1>Load more</h1>
<div id="content"></div>
<button id="lmbutton">Load More</button>

How to load several div elements?

1 Answers1