Java Script declaration issue

Question

let main = document.createElement("div"),
    togBtn = document.createElement("button"),
    divOne = document.createElement("div"),
    divTwo = document.createElement("div"),
    divThree = document.createElement("div"),
    blockQ = document.createElement("blockquote"),
    head2 = document.createElement("h2"),
    hr = document.createElement("hr"),
    textOne = document.createElement("p"),
    textTwo = document.createElement("p"),
    delBtn = document.createElement("button")

Is there any better way to get this result. With EJS6 or jQuery probably? Here is the final result. Some of them are children of each other

            <div class="classes" data-class="XII">
            <button onclick="tog('XII')" class="btn btn-block text-mono btn-outline-secondary">XII</button>
            <div id="XII" style="display: none;">
                <div class="card mb-3 text-center bg-secondary text-light border-0">
                    <div class="card-body">
                        <blockquote class="card-blockquote">
                            <h2 class="display-4">XII</h2>
                            <hr class="my-4">
                            <p class="lead">XII has 5 days per week and will study 6 subjects per day</p>
                            <p>During the week they will study: Mathematics, Physics, Biology, etc.</p>
                            <button class="btn btn-shadow text-mono btn-danger">Delete</button>
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>

That would depend entirely on what you do with those elements, and how they relate to each other. Could you give a more complete sample of the code. For example, are these elements children/siblings of each other? Are they appended to a single container, or throughout the document? Could they be cloned from a pre-existing structure instead? — Rory McCrossan, Jan 24 '18 at 15:59
In that case it makes sense to either 1) put that HTML in the page but hide it with CSS. Then, when you need it, `clone()` it, amend it then `show()` it. 2) Store it as a string in the JS and append it to the DOM in a single operation. Of the two I prefer the former as it removes the UI dependancy in the JS code. — Rory McCrossan, Jan 24 '18 at 16:04
I will use the former one I also do not like UI dependency in JS code. Thanks — R0xx0rZzz, Jan 24 '18 at 16:07
What Rory said. And, to make life easier rather than having a button that performs an action on a specific id (ie, `tog("XII")`), have it perform the action on the next element in the DOM to the button (ie, `tog(this)`), then, `this.nextSibling.style.display = ''` in your handler. That way you get one function that works for every button on the page without using ids. — James, Jan 24 '18 at 16:07

score 1 · Accepted Answer · answered Jan 24 '18 at 16:06

You can use template literals:

const template = ({title, lead, description}) => `<div class="classes" data-class="XII">
  <button onclick="tog('XII')" class="btn btn-block text-mono btn-outline-secondary">XII</button>
    <div id="XII" style="display: none;">
        <div class="card mb-3 text-center bg-secondary text-light border-0">
            <div class="card-body">
                <blockquote class="card-blockquote">
                    <h2 class="display-4">${title}</h2>
                    <hr class="my-4">
                    <p class="lead">${lead}</p>
                    <p>${description}</p>
                    <button class="btn btn-shadow text-mono btn-danger">Delete</button>
                </blockquote>
            </div>
        </div>
    </div>
</div>`;
const $html = $(template({
  title: 'my title',
  lead: 'my lead',
  description: 'my description'
});

you can put the actual HTML code in a script tag as a container and use a template engine to render it then. https://stackoverflow.com/questions/4912586/explanation-of-script-type-text-template-script — DoXicK, Jan 24 '18 at 16:11

Java Script declaration issue

1 Answers1