How to insert complex and big div to a div?

Question

I am trying to build a Bootstrap/CSS front end, wherein I need to add 100 custom cards(3 per row) and the div card is very big so normal DOM manipulation would be very complex and messy. So what can be a solution to this? Please suggest a pure Javascript way.

My div card is:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="col m-2 card_custom p-0 border">
                            <div class="card_header">
                                <h4>Shimla, India</h4>
                            </div>
                            <div id="carouselExampleControls1" class="carousel slide card_img" data-ride="carousel">
                                <span class="card_imgoverlay">
                                    #Trending
                                </span>
                                <div class="carousel-inner ">
                                    <div class="carousel-item active">
                                        <img src="./img/shimla1.jpg" height="300" width="300" alt="First slide">
                                    </div>
                                    <div class="carousel-item">
                                        <img src="./img/kasmir1.jpg" height="300" width="300" alt="Second slide">
                                    </div>
                                    <div class="carousel-item">
                                        <img src="./img/delhi1.jpg" height="300" width="300" alt="Third slide">
                                    </div>
                                </div>
                                <a class="carousel-control-prev" href="#carouselExampleControls1" role="button"
                                    data-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="carousel-control-next" href="#carouselExampleControls1" role="button"
                                    data-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                            <div class="card_options bg-white">
                                <a href="" class="nav-item ">Hotels</a>
                                <a href="" class="nav-item ">Food</a>
                                <a href="" class="nav-item ">Flight</a>
                                <a href="" class="nav-item ">Activites</a>
                            </div>
                            <div class="card_body bg-white">
                                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et odio, nesciunt ratione
                                    debitis nihil quibusdam!</p>
                            </div>
                            <div class="card_footer bg-white">
                                <div class="rating">
                                    <img src="./img/star.png" height="20" width="20" alt="">
                                    <p>4.1/5</p>
                                </div>
                                <div class="tag">
                                    <img src="./img/mountains.png" height="20" width="20" alt="">
                                    <p>Hill Station</p>
                                </div>
                            </div>
                            <div class="read_more text-center">
                                <button class="btn btn-dark custom_readmore">Read More</button>
                            </div>

*div card is very big so normal DOM manipulation won't work.* — what? Why won't "normal DOM manipulation" work? What goes wrong? — Pointy, Aug 31 '19 at 14:11
*and the div card is very big so normal DOM manipulation won't work* <-- Why not? The DOM API works with large elements as well as small ones. Please explain, in detail, what problem you are having. — Scott Marcus, Aug 31 '19 at 14:11
I mean it will work but that would be very complex to write. Sorry, I am going to edit the question.@Pointy — thatman303, Aug 31 '19 at 14:15
*so normal DOM manipulation would be very complex and messy* <-- Why would it be any more complex than any other manipulation? If you take the time to explain the structure you have and how you need to modify it, I'm sure the code to manipulate it is not as complex and messy as you think. Again, what specific problem are you having and what have you tried? — Scott Marcus, Aug 31 '19 at 14:16
@ScottMarcus Actually there're many child nodes and sub child nodes in the div. I want to know any method to add/append HTML code directly to a div without DOM. — thatman303, Aug 31 '19 at 14:21
I don't think you fully understand how the DOM API works. So what if there are many nodes and child nodes? All you need to know is the parent node that you want to append to. The only way to append more HTML is with the DOM. This is not as hard as you think it is. Please edit your question with exactly what you need to do and what you've tried, rather than just asking for a solution that fits the guidelines that you've incorrectly assumed are what you need. — Scott Marcus, Aug 31 '19 at 14:23

score 0 · Accepted Answer · answered Aug 31 '19 at 14:56

0

You could try having an invisible template of your card in the page, then clone it and append (or prepend depending on your use case) it to whatever the parent of the parent to the cards is. For cloning in pure JavaScript, I would take a look at this documentation and give it a shot. From my understanding, this just outputs a DOM object, so you will need to pass it to something like this to append it. Quick example:

var cardTemplate = document.getElementsByClassName("card-template")[0].cloneNode();
var currentCard = document.getElementById("card-container").appendChild(cardTemplate);
//Make any necessary changes to currentCard such as changing text/html
currentCard.classList.remove("card-template"); // Make the card visible

Then just a little bit of CSS:

.card-template{
    display: none;
}

And that should be it. I would definitely recommend looking into JQuery though as the performance is much better than native JavaScript and will really make a difference, especially with the number of cards that you need to create.

answered Aug 31 '19 at 14:56

Jesse

1,386
3
9
23

but this will create same id for the clone, but I need different ID for each card – thatman303 Aug 31 '19 at 15:17
Hence the line where I said to `make necessary changes to currentCard such as changing text/html` – Jesse Aug 31 '19 at 15:19
wow thank you so much, I always wonder how do you come across such functions like I was searching for hours and couldn't find such function or any suitable method to solve my problem. Maybe can you suggest ways to find a solution to such problems? – thatman303 Aug 31 '19 at 15:26
Usually what I do is break it down into smaller pieces, so I just did the same with your question. The first part was it had to be in pure JavaScript. Next you need to clone it in order to append it, so I simply google searched "clone element in pure javascript" and the first link I sent you was the second result. Then it needs to be appended, so I just did the same by searching "append in pure javascript" and the second link I sent was the first result. If that doesn't work, just rephrase it until you get what you want. – Jesse Aug 31 '19 at 15:33
[`document.getElementsByClassName("card-template")[0]`](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474) is a terrible idea, as is using `id`s to manage your elements. – Scott Marcus Aug 31 '19 at 15:58
Also, I think both of you don't understand what JavaScript is vs. an API. `cloneNode()` and `appendChild` are not JavaScript, they are DOM methods. So, if we were to take the OPs requirements at face value, this answer wouldn't be correct because it uses the DOM. As I indicated in my comments to the OP, the solution is to simply append to the parent. Having a hidden object that you cone and then un-hide is completely unnecessary. – Scott Marcus Aug 31 '19 at 16:01
I understand the difference between JavaScript and an API. I was reading between the lines. I know that it's a bad practice and this would usually be done by a back-end such as PHP or ASP.NET, but with the current state of the question, this seemed to be the best solution. If you're going to give criticism, at least make it constructive instead of just saying "simply append to the parent" by adding an example or reference links. – Jesse Aug 31 '19 at 16:20
And also, there are such things as beginners. Not everyone is going to know all of the fine details of the language to be able to phrase their questions in as exact of a way as you are asking, although I do admit, the question can be improved quite significantly. – Jesse Aug 31 '19 at 16:28

How to insert complex and big div to a div?

1 Answers1