id hinzufügen, um dynamisch erstellt <div>

Habe ich die folgende JavaScript-Code erzeugt einen div und dann hängt es an den Körper und fügt dann einige dynamisch generierte HTML-Code in es. cartDiv = document.createElement('div'); div möchte ich hinzufügen, eine id und/oder Klasse. Wenn möglich sowohl Jquery und JavaScript-Antworten wäre toll.

var cartHTML = '<div class="soft_add_wrapper" onmouseover="setTimer();">';
cartHTML += '<div class="soft_add_header_shadow">';
cartHTML += '<div class="soft_add_header"><span class="soft_add_span">Added to cart</span><a href="" class="close_btn" onclick="hideCart(); return false;">Close</a></div></div>'
cartHTML += '<div class="soft_add_content_shadow"><div class="soft_add_content_wrapper">';
cartHTML += '<div class="soft_add_content_area" onscroll="setTimer();"><table class="cart_table" cellpadding="0" cellspacing="0" border="0">';
if (cartLength != 0) {
    cartHTML += cartLoop(index, cartLength);
    if (index != 0) {
        cartHTML += cartLoop(0, index);
    }
    if (discountTotal != "0") {
        var discountProduct = {
        ProductName: "Discount(s)",
        ProductPrice: '<span style="color:red">' + discountTotal + '</span>'
        }
        cartHTML += getLineItemHTML(discountProduct);
    }
}
cartHTML += '</table></div><div class="soft_add_sub_total"><div class="number_of_items">' + quantity + ' items in cart</div>';
cartHTML += '<div class="sub_total">';
cartHTML += 'Subtotal: <span class="sub_total_amount">' + cartTotal + '</span>';
cartHTML += '</div>';
 cartHTML += '</div><div class="soft_add_action_area"><a href="/ShoppingCart.asp" class="check_out">Check Out</a>';
cartHTML += '<a href="" class="continue_shopping" onclick="hideCart(); return false;">Continue shopping</a></div></div></div></div>';
if (cartDiv == null) {
    cartDiv = document.createElement('div');
    document.body.appendChild(cartDiv);
}
cartDiv.innerHTML = cartHTML;

InformationsquelleAutor der Frage user357034 | 2010-07-23

  1. 109

    Wenn ich Sie richtig, es ist so einfach, wie

    cartDiv.id = "someID";

    Keine Notwendigkeit für jQuery.

    Haben Sie einen Blick auf die Eigenschaften eines DOM-Elements.

    Für Klassen ist es das gleiche:

    cartDiv.className = "classes here";

    Beachten Sie aber, dass dies zum überschreiben von bereits vorhandenen Klasse Namen. Wenn Sie möchten, hinzufügen und entfernen von Klassen, die dynamisch ist, müssen Sie entweder jQuery oder schreiben Sie Ihre eigene Funktion, die einen string Ersatz.

    InformationsquelleAutor der Antwort Felix Kling

  2. 0

    Können Sie die id="MyID123" zu Beginn des cartHTML text anfügt.

    Die erste Zeile wäre also:

    var cartHTML = '<div id="MyID123" class="soft_add_wrapper" onmouseover="setTimer();">';

    -ODER-

    Wenn Sie wollen, dass die ID in eine variable, dann so etwas wie dieses:

        var MyIDvariable = "MyID123";
    var cartHTML = '<div id="'+MyIDvariable+'" class="soft_add_wrapper" onmouseover="setTimer();">';
/* ... the rest of your code ... */

    InformationsquelleAutor der Antwort PCoughlin

  3. -1

    Nicht sicher, ob dies der beste Weg, aber es funktioniert.

    if (cartDiv == null) {
    cartDiv = "<div id='unique_id'></div>"; //document.createElement('div');
    document.body.appendChild(cartDiv);
}

    InformationsquelleAutor der Antwort Sandro

  4. -1

    Jquery append den Wert für die Erstellung von dynamisch

    zB:

    var user_image1='<img src="{@user_image}" class="img-thumbnail" alt="Thumbnail Image" 
style="width:125px; height:125px">';

$("#userphoto").append(user_image1.replace("{@user_image}","http://127.0.0.1:50075/webhdfs/v1/PATH/"+user_image+"?op=OPEN"));

    HTML :

    <div id="userphoto">

    InformationsquelleAutor der Antwort Praveen Kumar K R

  5. -2

    Hier ist ein Beispiel was ich erstellt mit ID ' s mit meinem JavaScript.

    function abs_demo_DemandeEnvoyee_absence(){

    var iDateInitiale = document.getElementById("abs_t_date_JourInitial_absence").value; /* On récupère la date initiale*/
    var iDateFinale = document.getElementById("abs_t_date_JourFinal_absence").value;     /*On récupère la date finale*/
    var sMotif = document.getElementById("abs_txt_motif_absence").value;                 /*On récupère le motif*/  
    var iCompteurDivNumero = 1;                                                         /*Le compteur est initialisé à 1 parce que la div 1 existe*/
    var TestDivVide = document.getElementById("abs_Autorisation_"+iCompteurDivNumero+"_absence") == undefined; //Boléenne, renvoie false si la div existe déjà
    var NewDivCreation = "";                                                            /*Initialisée en string vide pour concaténation*/
    var NewIdCreation;                                                                  /*Utilisée pour créer l'id d'une div dynamiquement*/
    var NewDivVersHTML;                                                                 /*Utilisée pour insérer la nouvelle div dans le html*/


    while(TestDivVide == false){                                                        /*Tant que la div pointée existe*/
        iCompteurDivNumero++;                                                           /*On incrémente le compteur de 1*/
        TestDivVide = document.getElementById("abs_Autorisation_"+iCompteurDivNumero+"_absence") == undefined; /*Abs_autorisation_1_ est écrite en dur.*/   
    }

    NewIdCreation = "abs_Autorisation_"+iCompteurDivNumero+"_absence"                   /*On crée donc la nouvelle ID de DIV*/

                                                                                        /*On crée la nouvelle DIV avec l'ID précédemment créée*/
    NewDivCreation += "<div class=\"abs_AutorisationsDynamiques_absence\" id=\""+NewIdCreation+"\">Votre demande d'autorisation d'absence du <b>"+iDateInitiale+"</b> au <b>"+iDateFinale+"</b>, pour le motif suivant : <i>\""+sMotif+"\"</i> a bien été <span class=\"abs_CouleurTexteEnvoye_absence\">envoyée</span>.</div>";

    document.getElementById("abs_AffichagePanneauDeControle_absence").innerHTML+=NewDivCreation; /*Et on concatenne la nouvelle div créée*/ 

    document.getElementById("abs_Autorisation_1_absence").style.display = 'none'; /*On cache la première div qui contient le message "vous n'avez pas de demande en attente" */

}

    Bieten text-übersetzung, wenn Sie gefragt werden. 🙂

    InformationsquelleAutor der Antwort Corentin

  6. -6

    Werden Sie haben, um tatsächlich NUTZEN jQuery zum erstellen der div, wenn Sie schreiben wollen, wartbar oder verwendbaren code.

    //create a div
var $newDiv = $('<div>');

//set the id
$newDiv.attr("id","myId");

    InformationsquelleAutor der Antwort Stefan Kendall

Schreibe einen Kommentar