How to add a whole section using JavaScript?
Question
So I am trying to write a script to add a whole, newly added, section to Adobe Analytics. I am not sure I can do it though, so I will appreciate your help. I thought I should add a class name to the section and use document.getElementsbyClassName but it does not seem to work? I also need to add the nested divs and their styles again using JS? Here is my code:
<section class="flex-columns" style=" background-color: crimson; height: 450px; display: flex; justify-content: center; align-items: center; "> <div style=" top: 132px; left: 340px; width: 400px; height: 400px; background: #FFFFFF 0% 0% no-repeat padding-box; border-radius: 10px; opacity: 1; margin-left: 5px; margin-right: 15px; "> <p style=" top: 187px; left: 391px; width: 31px; height: 138px; text-align: left; font: normal normal bold 120px/36px Value; letter-spacing: 0px; opacity: 1; margin-top: 65px; margin-left: 30px; color: black; border-style: solid; border-color: black; ">1</p> <p style=" top: 326px; left: 391px; width: 298px; height: 152px; text-align: left; font: normal normal bold 45px/50px Value; letter-spacing: 0px; color: #888888; opacity: 1; margin-left: 30px; ">Find your nearest store</p> </div> <div style=" top: 132px; left: 340px; width: 400px; height: 400px; background: #FFFFFF 0% 0% no-repeat padding-box; border-radius: 10px; opacity: 1; margin-left: 5px; margin-right: 15px; "> <p style=" top: 187px; left: 811px; width: 66px; height: 138px; text-align: left; font: normal normal bold 120px/36px Value; letter-spacing: 0px; color: black; opacity: 1; margin-top: 65px; margin-left: 30px; ">2</p> <p style=" top: 326px; left: 811px; width: 298px; height: 152px; text-align: left; font: normal normal bold 45px/50px Value; letter-spacing: 0px; color: #888888; opacity: 1; margin-left: 30px; ">Book a free hearing test</p> </div> <div style=" top: 132px; left: 340px; width: 400px; height: 400px; background: #FFFFFF 0% 0% no-repeat padding-box; border-radius: 10px; opacity: 1; margin-left: 5px; margin-right: 15px; "> <p style=" top: 187px; left: 1231px; width: 68px; height: 138px; text-align: left; font: normal normal bold 120px/36px Value; letter-spacing: 0px; color: black; border: 2px; border-color: black; margin-top: 65px; margin-left: 30px; ">3</p> <p style=" top: 326px; left: 1231px; width: 298px; height: 152px; text-align: left; font: normal normal bold 45px/50px Value; letter-spacing: 0px; color: #888888; opacity: 1; margin-left: 30px; /* margin-bottom: 0px; */ ">Get supported by our experts</p> </div> </section>
1 answers
solution1
0 2021-12-15 00:23:12
Since the post editing queue is full, I am sharing the current work in this area again. Could you explain the problem more clearly?
/* I don't understand what the problem is and what you want to do! */
.section-style { background-color: crimson; height: 450px; display: flex; justify-content: center; align-items: center; } /* Common */.columns { top: 132px; left: 340px; width: 400px; height: 400px; background: #FFFFFF 0% 0% no-repeat padding-box; border-radius: 10px; opacity: 1; margin-left: 5px; margin-right: 15px; }.titles{ top: 187px; height: 138px; text-align: left; font: normal normal bold 120px/36px Value; letter-spacing: 0px; margin-top: 65px; margin-left: 30px; color: black; }.contents{ top: 326px; width: 298px; height: 152px; text-align: left; font: normal normal bold 45px/50px Value; letter-spacing: 0px; color: #888888; opacity: 1; margin-left: 30px; } /* Titles */.title-first { left: 391px; width: 31px; opacity: 1; border-style: solid; border-color: black; }.title-second { left: 811px; width: 66px; opacity: 1; }.title-thirth { left: 1231px; width: 68px; border: 2px; border-color: black; } /* Contents */.content-first { left: 391px; height: 152px; }.content-second { left: 811px; }.content-thirth { left: 1231px; /* margin-bottom: 0px; */ }
<.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test Application</title> <link rel="stylesheet" href="style.css"> </head> <body> <section class="flex-columns section-style"> <div class="columns"> <p class="titles title-first">1</p> <p class="contents content-first">Find your nearest store</p> </div> <div class="columns"> <p class="titles title-second">2</p> <p class="contents content-second">Book a free hearing test</p> </div> <div class="columns"> <p class="titles title-thirth">3</p> <p class="contents content-thirth">Get supported by our experts</p> </div> </section> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to find the section reaches the top and add a class using plain javascript
How to add a created element in the CRM section using JavaScript?
How to add a whole table by a javascript code?
How can I add body to JavaScript section?
How do I add something to my html using javascript without erasing the whole page
how to navigate to another section of the page using javascript?
How to collapse section using Javascript on single click?
How to save and restore the whole website using Javascript?
How to extract whole table tag using javascript
How to copy a whole section (input texts, dropdown value,) all togther in one line with javascript?
Related Tags