Javascript 将id添加到动态创建的<；部门>；_Javascript_Jquery

Javascript 将id添加到动态创建的<；部门>；

javascript jquery

Javascript 将id添加到动态创建的<；部门>；,javascript,jquery,Javascript,Jquery,我有下面的JavaScript，它创建一个div，然后将其附加到主体中，然后向主体中插入一些动态生成的HTML。cartDiv=document.createElement（'div'）；我想在这个div中添加一个id和/或一个类。如果可能的话，Jquery和JavaScript的答案都会很好 var cartHTML = '<div class="soft_add_wrapper" onmouseover="setTimer();">'; cartHTML += '<div

我有下面的JavaScript，它创建一个div，然后将其附加到主体中，然后向主体中插入一些动态生成的HTML。cartDiv=document.createElement（'div'）；我想在这个div中添加一个id和/或一个类。如果可能的话，Jquery和JavaScript的答案都会很好

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;

var cartHTML=''；
cartHTML+=''；
cartHTML+=“已添加到购物车”
cartHTML+=''；
cartHTML+=''；
如果（cartLength！=0）{
cartHTML+=cartLoop（索引，cartLength）；
如果（索引！=0）{
cartHTML+=cartLoop（0，索引）；
}
如果（折扣总额！=“0”）{
var折扣产品={
产品名称：“折扣”，
产品价格：''+折扣总额+''
}
cartHTML+=getLineItemHTML（折扣产品）；
}
}
cartHTML+=''+数量+'购物车中的项目'；
cartHTML+=''；
cartHTML+='小计：'+cartTotal+''；
cartHTML+=''；
cartHTML+=''；
cartHTML+=''；
if（cartDiv==null）{
cartDiv=document.createElement（'div'）；
文件.body.appendChild（cartDiv）；
}
cartDiv.innerHTML=cartHTML；

如果我没弄错的话，这很容易

cartDiv.id = "someID";

不需要jQuery

看一看这张照片

对于类，它是相同的：

cartDiv.className = "classes here";

但请注意，这将覆盖现有的类名。如果要动态添加和删除类，必须使用jQuery或编写自己的函数来替换字符串。

不确定这是否是最好的方法，但它可以工作

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

if（cartDiv==null）{
cartDiv=”“；//document.createElement（'div'）；
文件.body.appendChild（cartDiv）；
}

如果您想编写可维护或可用的代码，就必须实际使用jQuery来构建div

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

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

//创建一个div
变量$newDiv=$（''）；
//设置id
$newDiv.attr（“id”、“myId”）；

使用Jquery附加值以动态创建

例如：

var user\u image1=''；
$（“#userphoto”）.append（user_image 1.replace（“{@user_image}”），”http://127.0.0.1:50075/webhdfs/v1/PATH/“+user_image+”？op=OPEN”）；

HTML:

<div id="userphoto">

您可以在HTML文本附件的开头添加

id=“MyID123”

因此，第一行是：

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

var cartHTML=''；

-或-

如果希望ID位于变量中，则如下所示：

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

var MyIDvariable=“MyID123”；
var cartHTML=''；
/* ... 剩下的代码*/

以下是我用JavaScript创建ID的示例

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" */

}

函数abs\u demo\u DemandeEnvoyee\u缺席（）{
var iDateInitiale=document.getElementById（“abs_t_date_JourInitial_缺席”）.value；/*在récupère la date首字母上*/
var iDateFinale=document.getElementById（“abs_t_date_JourFinal_缺席”）.value；/*在récupère la date final上*/
var sMotif=document.getElementById（“abs_txt_motif_缺席”）.value；/*在récupère le motif*/
var iCompteurDivNumero=1；/*Le compteur est initialisé1 parce que la Div1 existe*/
var testdivide=document.getElementById（“abs\u Autorisation\uu”+iCompteurDivNumero+“\u缺席”）==未定义；//Boléenne，renvoie false si la div existe déjá
var NewDivCreation=“”；/*首字母大写，参见浇注混凝土*/
var NewIdCreation；/*使用动态分区*/
var NewDivVersHTML；/*新版本的应用程序*/
而（testdivide==false）{/*Tant que la div pointée existe*/
iCompteurDivNumero++；/*关于1号注册会计师*/
testdivide=document.getElementById（“abs\u Autorisation\uuu”+iCompteurDivNumero+“\u缺席”）==未定义；/*abs\u Autorisation\uu 1\uu测试期间的标准。*/
}
NewIdCreation=“abs\u Autorisation”+icompteurdivnumerio+“\u缺勤”/*在新身份证上*/
/*关于《新约》第二卷*/
NewDivCreation+=“自动化和缺席的要求”+iDateInitiale+“au”+iDateFinale+”，这是一个主题：\“+sMotif+”\“a bienététéemissionée.”；
document.getElementById（“abs_AffichagePanneauDeControle_缺席”）.innerHTML+=NewDivCreation；/*Et on concatene la nouvelle div crée*/
document.getElementById（“abs_Autorisation_1_缺席”）.style.display='none'；/*在缓存的高级分区上显示一条连续消息“您需要参加吗”*/
}

如有要求，将提供文本翻译。：）

是的，我想向新创建的cartDiv添加一个id和/或一个类，我假设它正好在这行cartDiv=document.createElement（'div'）之后；更新：对于较新的javascript引擎，您可以使用新的classList API来获得更类似于jQuery的类体验：但是下面的行将不再工作：

cartDiv.innerHTML=cartHTML好吧，jQuery让事情变得容易多了，但是我非常确信，没有jQuery，人们可以编写可用且可维护的JS。你的答案看起来好像总是要用jQuery生成好的JS代码。在一个有IE6和IE7的世界里，这句话几乎总是正确的。几乎不可能记住IE的所有细微差别。例如，如果您试图在IE中设置“colspan”，则需要将其标记为“colspan”，以便动态添加属性并使其工作。使用jQuery1.4.2，这是为您处理的$（'td'）.attr（“colspan”，3）运行良好。不必使用jQuery来“编写可维护和可用的代码”，Stefan感谢您的帮助，但我没有
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" */

}