动态创建的<div>如何添加id？

Question

我有以下的JavaScript代码，它创建了一个div元素并将其附加到body中，然后在其中插入一些动态生成的HTML内容。 cartDiv = document.createElement('div'); 我想要为此div元素添加一个id和/或class属性。如果可能，提供使用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;

- user357034

---

Stefan，谢谢你的帮助，但我没有要求评论。这不是我的代码，而是我必须解决的代码。将来，如果您能只提供帮助而不加评论，那对于像我们这样不太有知识的人来说会更有益。如果您在这里只是为了帮忙的话，提供一个将上面的代码转换为 JQuery 的示例不是更有帮助吗？ - user357034

Answer 1

如果我理解正确，这很容易

cartDiv.id = "someID";

不需要使用jQuery。

看一下DOM元素的属性。

对于类名也是同样的方式：

cartDiv.className = "classes here";

但请注意，这将覆盖已经存在的类名。如果您想要动态添加和删除类名，您可以使用jQuery或者编写自己的函数来进行字符串替换。

- Felix Kling

---

是的，我想要为新创建的cartDiv div添加一个id和/或类。 - user357034

我假设这行代码紧跟在这一行之后 cartDiv = document.createElement('div'); - user357034

更新：对于较新的JavaScript引擎，您可以使用新的classList API以获得更类似于jQuery的类体验：https://developer.mozilla.org/en-US/docs/Web/API/Element.classList - Rodaine

Answer 2

你可以在cartHTML文本附加的开头添加id="MyID123"。

因此，第一行将是：

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

如果您希望将ID存储在一个变量中，可以使用以下代码：

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

- PCoughlin

Answer 3

再提供另一个有用的替代方法:

1. 创建元素:

const newElement = document.createElement("h3")

2. 给新创建的元素赋予一个id:

newElement.id = "newElementID";

3. 此时，您实际上可以将其打印到控制台以查看元素的外观:

console.log("Printing my new element: ", newElement)

结果将是:<h3 id="newElementID"></h3>

4. 您可以添加内容到新创建的元素中，例如使用innerHTML:

newElement.innerHTML = "content of new element";

5. 放入内容后，您可以选择一个父元素并将已创建的元素附加到该父元素中:

parentElement = document.querySelector(".parentElement") parentElement.appendChild(newElement)

6. 如果需要，你甚至可以随后将该项移除，像这样：

newElement.remove();

- vially

Answer 4

不确定这是否是最好的方法，但它能够正常工作。

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

- Sandro

---

但是接下来的这行代码就无法工作了：cartDiv.innerHTML = cartHTML; - Felix Kling

Answer 5

使用jQuery动态添加数值来创建元素。

例如：

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

- Praveen Kumar K R

Answer 6

这是我用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" */

}

如果需要，我可以提供文本翻译。:)

- Corentin

Answer 7

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

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

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

- Stefan Kendall

---

好的，jQuery使事情变得更加容易，但我很确定人们可以在没有jQuery的情况下编写可用且可维护的JS代码。 - Felix Kling

我不是在谈论 OP 的代码。你的答案似乎暗示人们必须始终使用 jQuery 才能产生好的 JS 代码。 - Felix Kling

在IE6和IE7的世界中，这个语句几乎总是不变的真理。要记住IE的所有细节几乎是不可能的。例如，如果您想在IE中设置“colspan”，则需要将其标记为“colSpan”，以便动态添加属性并使其正常工作。使用jQuery 1.4.2，这些都已经为您处理了。$('td').attr("colspan",3)就可以正常工作。 - Stefan Kendall

不必使用jQuery来“编写可维护和可用的代码”。 - pixel 67