Question

我真的不明白为什么没有创建dt和dd而没有添加到我创建的dl中。这是我尝试的第一种方式：

    // Liste des mots du dictionnaire
var mots = [
    {
        terme: "Procrastination",
        definition: "Tendance pathologique à remettre systématiquement au lendemain"
    },
    {
        terme: "Tautologie",
        definition: "Phrase dont la formulation ne peut être que vraie"
    },
    {
        terme: "Oxymore",
        definition: "Figure de style qui réunit dans un même syntagme deux termes sémantiquement opposés"
    }
];
// TODO : créer le dictionnaire sur la page web, dans la div "contenu"
var divEtl = document.getElementById("contenu");
var dlEtl = document.createElement("dl");

for (var i = 0; i < mots.length; i++) {

    var termeEtl = document.createElement("dt");
    var definitionEtl = document.createElement("dd");

    var termeTextnode = document.createTextNode(mots[i].terme.toString());
    var definitionTextnode = document.createTextNode(mots[i].definition.toString());

    dlEtl.appendChild(termeEtl.appendChild(termeTextnode));
    dlEtl.appendChild(definitionEtl.appendChild(definitionTextnode));
}
divEtl.appendChild(dlEtl);

，HTML中的结果是：

<div id="contenu"><dl>ProcrastinationTendance pathologique à remettre systématiquement au lendemainTautologiePhrase dont la formulation ne peut être que vraieOxymoreFigure de style qui réunit dans un même syntagme deux termes sémantiquement opposés</dl></div>

我也尝试了另一种方式，它创建了dt和dd，但后来我无法显示这些内容和定义。

var dl = document.createElement("dl");

for (var term in mots) {
    var dt = document.createElement("dt");
    var dd = document.createElement("dd");

    dt.innerHTML = mots.terme;
    dd.innerHTML = mots.definition;

    dl.appendChild(dt);
    dl.appendChild(dd);
}

divEtl.appendChild(dl);

dt和dd标签填充了＆＃34; undefined＆＃34; ... 谢谢

Answer 1

doc表示appendChild返回子本身，而不是父本。以这种方式更改代码以将dt和dd传递给dl。

termeEtl.appendChild(termeTextnode) ;
definitionEtl.appendChild(definitionTextnode) ;

dlEtl.appendChild(termeEtl);
dlEtl.appendChild(definitionEtl);

当我们迭代mots数组时，term将填充数组索引，因此数据可以作为mots[term].terme访问。

for (var term in mots) {
    ...
    dt.innerHTML = mots[term].terme;
    dd.innerHTML =  mots[term].definition;
    ...
}

Answer 2

您的代码是正确的，除了for循环中的附加内容。由于appendChild没有返回该父级，因此您不会向d1Et1追加任何内容。

尝试这样，

    // Liste des mots du dictionnaire
var mots = [
    {
        terme: "Procrastination",
        definition: "Tendance pathologique à remettre systématiquement au lendemain"
    },
    {
        terme: "Tautologie",
        definition: "Phrase dont la formulation ne peut être que vraie"
    },
    {
        terme: "Oxymore",
        definition: "Figure de style qui réunit dans un même syntagme deux termes sémantiquement opposés"
    }
];
// TODO : créer le dictionnaire sur la page web, dans la div "contenu"
var divEtl = document.getElementById("contenu");
var dlEtl = document.createElement("dl");

for (var i = 0; i < mots.length; i++) {

    var termeEtl = document.createElement("dt");
    var definitionEtl = document.createElement("dd");

    var termeTextnode = document.createTextNode(mots[i].terme.toString());
    var definitionTextnode = document.createTextNode(mots[i].definition.toString());

    termeEtl.appendChild(termeTextnode);
    definitionEtl.appendChild(definitionTextnode);
    dlEtl.appendChild(termeEtl);
    dlEtl.appendChild(definitionEtl);
}
divEtl.appendChild(dlEtl);

<dt>和</dt> <dd>未附加

2 个答案: