javascript – How do I generate a div with select-option tags and some button on the click on a button?

So I have this code:
HTML
I want the generated div to be append to the div with class ‘members’
I also have two button: one to generate the div and the other to submit
My console shows me no error but the code won’t just work and it will freeze my browser
Any help??
This is my code

<main>
        <div class="members">

        </div>
        <form>
            <button class="addMember" type="button">Add Member <i class="fas fa-plus-square"></i> </button>
            <button type="submit" class="submit">Submit</button>
        </form>
    </main>

JS:

const generateDOM = function(e) {
    e.preventDefault();
    const memEl = document.createElement('div');
    memEl.classList.add("member")
    const counter = document.createElement('input');
    const num = document.createElement('input');
    const mem = document.createElement('select');
    let memOpt = document.createElement('option');
    const removeButton = document.createElement('button');

    //  setup the drop-down members
    for (let i = 0; i < totalInheritors.length;) {
        memOpt.value = totalInheritors(i);
        memOpt.text = totalInheritors(i);
        memOpt.classList.add('member-name')
        mem.appendChild(memOpt);
    }
    mem.classList.add('member-group')
    memEl.appendChild(mem);

    // setup the removeButton
    removeButton.innerHTML = '<i class="fas fa-trash"></i>';
    removeButton.classList.add("trash-btn");
    memEl.appendChild(removeButton);

    // setup counter attributes
    counter.setAttribute('type', 'range');
    counter.min = 1;
    counter.max = 10;
    counter.classList.add('mem-range')
    memEl.appendChild(counter);

    // setup counter attributes
    num.setAttribute('type', 'number');
    num.min = 1;
    num.max = 10;
    num.classList.add('mem-num')
    memEl.appendChild(num);

    // setting DOM elements
    memContainer.appendChild(memEl);
};

Note I wanna generate my options from an array of strings

magento2.3 – Add div background image in email template

I have created a custom email template and I want to add background image to one of its div element. I have added html file in my email with below content.

<div
  class="container"
  width="100%"
  style="
    background-image: url('{{view url="My_Module/img/myimage.png"}}');
    padding: 20px 60px;
    background-size: cover;
  "
>

But its not working. It removes whole style tag from my div in final email.
If I am using complete image static url, it works correctly like below.

<div
  class="container"
  width="100%"
  style="
    background-image: url('https://domain.com/my-full-image-path/myimage.png');
    padding: 20px 60px;
    background-size: cover;
  "
>

Please note here that I want to add background image and not img field with src. I have checked and found that the image path is correct so no issues with image path here.
Does anyone know how we can add background image in email template content.

layout – Magento2 move a specific div id inside on the bottom of another div

I have a div with id homepagebanner I want to move this div to the top of the div with id maincontent

I am not sure how to edit the default cml this would be for the homepage only .

<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <body>
     <move element="homepagebanner" destination="maincontent" before="-"/>
  </body>
</page

css – Using JS .show() and .hide() causes hidden div to not be displayed properly

So I have a drop down menu coded in HTML as follows

<Select id="ContentSelector">
   <option value="Courses">Courses</option>
   <option value="Podcourses">Podcourses</option>
   <option value="Webinars">Webinars</option>
</Select>
<div id="Courses" class="Content"> Courses... </div>
<div id="Podcourses" class="Content"> Podcourses.. </div>
<div id="Webinars" class="Content"> Webinars.. </div>

With the following CSS

.Content{
  display: none;
  text-align: center;
}
#ContentSelector{
  width: 100%;
  text-align: center;

}

Now I have Javascript that hides the div’s and shows the divs when the different menus are selected.

 //create functions for dropdown menu
 function dropDown() {
    jQuery('#ContentSelector').on('change', function () {

        //If Courses is selected, show Courses, hide Podcourses and Webinars.
        if (this.value == 'Courses') {
            jQuery("#Test1").show();
            jQuery("#Test2").hide();
            jQuery("#Test3").hide();
            jQuery("#Courses").show();
            jQuery("#Podcourses").hide();
            jQuery("#Webinars").hide();
        }

        //If Podcourses is selected, show Podcourses, hide Courses and Webinars.
        if (this.value == 'Podcourses') {
            jQuery("#Test1").hide();
            jQuery("#Test2").show();
            jQuery("#Test3").hide();
            jQuery("#Courses").hide();
            jQuery("#Podcourses").show();
            jQuery("#Webinars").hide();
        }

        //If Webinars is selected, show Webinars hide Courses and Podcourses.
        if (this.value == 'Webinars') {
            jQuery("#Test1").hide();
            jQuery("#Test2").hide();
            jQuery("#Test3").show();
            jQuery("#Courses").hide();
            jQuery("#Podcourses").hide();
            jQuery("#Webinars").show();
        }

    });
}
jQuery(document).ready(dropDown());

This works great better than I could ask… except when selecting the different menu’s can cause issues with the theme’s footer. Sometimes (especially since the size of the content between the 3 selections differs) the footer floats over the space that the div is supposed to occupy. Also the div content is often overlapped upon each other.

Link to page I am working on. If you click on the dropdown menu and choose Podcourses you should be able to reproduce the issue. This works for users and non users alike.

JSFiddle with minimum working code

I am using Beaver Builder to build the webpage and am using the Powerpack Addons Pack specifically this module for the div content. Also I am using Astra for the theme for header and footers.

Any Help Would be greatly appreciated.

javascript – Como duplicar ou clonar uma DIV em Java Script e ler todos os elementos em ASP.NET C#

Olá,

Tenho um formulário de convidados que preciso aumentar automaticamente os campos de acordo com o preenchimento.

O código é:

<div class="form-row" id="Guests">
<p><strong>Guests Forms</strong></p>
<div id="guest1">

    <div class="form-group col-md-3">
        <label for="labelGuestNumber" class="col-sm-1 col-form-label">1.</label>
        <label for="labelGuesName1" class="col-sm-2 col-form-label">Name: </label>
        <div class="col-sm-8" style="margin-left: 5px;">
            <input runat="server" class="form-control" id="inputGuestName1" placeholder="Guest Name" required>
        </div>
    </div>
    <div class="form-group col-md-4" style="margin-left: -40px;">
        <label for="labelCPFCNPJGuest1" class="col-sm-3 col-form-label" >CPF/CNPJ:</label>
        <div class="col-sm-7">
            <input runat="server" class="form-control" id="inputCPFCNPJGuest1" placeholder="CPF / CNPJ" onChange="newGuest()" required>
        </div>
    </div>
</div>

Ou seja, toda vez que preencher o CPF/CNPJ ele pode abrir mais uma linha para preencher outro convidado. Quando enviar esse formulário, preciso que seja lido em ASP.NET C# para ser inserido no banco de dados.

Não tenho ideia de como resolver.

html – How to make this div element the size of the img contained within it? [css]

I am attempting to create a tooltip, to appear when hovering on an image within a table.
However when I add the div to put a container for the tooltip, it adds extra spacing to my table, as seen in the first row (not applied to subsequent rows).

Why is the div 118 x 66 size as shown instead of the size of the image within it (59×59
)? It creates unnecessary spacing.

Oversized horitionzal dimension

html

CSS for tooltip

Tooltip in action

html – Div in navbar Bootstrap break the center

I have a navbar which is centered perfectly with this code :

        <nav class="navbar navbar-light bg-light text-primary navbar-personalized w-100 justify-content-center navbar-personalized">
        <div class="row">
            <a class="navbar-brand">
                My WebSite
            </a>
        </div>
    </nav>

Now I want to add a div inside which is clickable :

   <nav class="navbar navbar-light bg-light text-primary w-100 justify-content-center navbar-personalized">
      <div class="row">
        <a class="navbar-brand">
          My Web Site
        </a>

          <div id="messageAdministrateur" onclick="alert('This is an alert')" style="color:red;text-align: center;width: 100%;">
          <b>WARNING, NEW MESSAGE<br>CLICK</b>
          </div>
            </div>
    </nav>

I would like to center the both but only WARNING, NEW MESSAGE CLICK is centered and not My Web Site. How to center the both ? This is a working example :
https://jsfiddle.net/g2ea36rn/

javascript – What is the best method to inject large amounts of HTML into a div

I’m pretty new to web design, and I’m trying to build a dashboard for my project. So far, I’ve got my UI looking like I want it to. It basically consists of a header bar, with a navigation bar on the left side with some options that the user can click on. I want a click on each item to change the content in the central area. The way I thought of was simply to use:

document.getElementById(“central text element”).innerHTML = “the HTML I want to change it to”;

This approach, functionally, does everything I would like. The only problem is, the content I would like to insert is pretty long. For each of my options, I basically have to create individual HTML documents that I can edit the content in, then run it through a converter like this: https://tomeko.net/online_tools/cpp_text_escape.php?lang=en, then copy it in. As you can probably understand, this method is not very streamlined, as every time I want to make some changes to the code, I have to copy that chunk of code into this converter then paste it into the JavaScript function.

Is there a better way to achieve what I’m trying to do here?

Is there a way to XSS inside div, without brackets

I am currently learning XSS and came across this exercise:


    
USER INPUT HERE

I have not found a way to get around it. I'm still learning, so forgive me if you're a pro and that seems too obvious. Here's what I tried and noticed.

The brackets <> and the quotation marks "are escaped in HTML notation (not sure of the name) so try

give me this


    

I find it a bit odd that <is encoded in two different ways here: <and <but whatever.

The hexadecimal notation was not more effective, and "% 3c% 73% 63% 72% 69% 70% 74% 3rd% 61% 6c% 65% 72% 74% 28% 22% 48% 69% 22% 29% 3b% 3c% 2f% 73% 63% 72 % 69% 70% 74% 3rd"has just been written in plain text between the div tags.
The same goes for encoding unicode characters with u3c.

I would be happy to receive advice, thanks for reading