HTML DOM - element.appendChild(） 的行为不像我期望的那样

HTML DOM - element.appendChild() doesn't behave as I expect it to

本文关键字：期望 element appendChild HTML DOM      更新时间：2023-09-26

链接到代码（JS和CSS可以通过页面源代码找到）： https://dl.dropboxusercontent.com/u/16952797/webdev/uppg1/kontakt.htmlalt 链接：http://jsfiddle.net/DdQhk/（尽管 JSFIDDLE 无法正确呈现页面）

相关代码行（函数createFormBug（） - kontakt.js中的第31至66行）法典：

function createFormBug() {
    var form = document.createElement("form");
    var fieldset = document.createElement("fieldset");
    var legend = document.createElement("legend");
    var labelFunction = document.createElement("label");
    var labelInterface = document.createElement("label");
    var labelComment = document.createElement("label");
    var radioFunction = document.createElement("input");
    radioFunction.type = "radio";
    var radioInterface = document.createElement("input");
    radioInterface.type = "radio";
    var textarea = document.createElement("textarea");
    var buttonSubmit = document.createElement("input");
    radioInterface.type = "submit";
    form.id = "formBug";
    legend.textContent = "Bugg";
    document.getElementById("divForm").appendChild(form);
    form.appendChild(fieldset);
    fieldset.appendChild(legend);
    fieldset.appendChild(labelFunction);
    fieldset.appendChild(radioFunction);
    fieldset.appendChild(labelInterface);
    fieldset.appendChild(radioInterface);
    fieldset.appendChild(labelComment);
    fieldset.appendChild(textarea);
    fieldset.appendChild(buttonSubmit);


}

上下文：我正在尝试使用 js 动态创建表单，不幸的是，由于某种原因某些元素没有附加。

在 Chrome 上运行时生成的 HTML 的部分输出（相关部分）：

<div id="divForm">
    <form id="formBug">
        <fieldset>
            <legend>Bugg</legend>
            <label></label>
            <input type="radio">
            <label></label>
            <input type="submit">
            <label></label>
            <textarea></textarea>
            <input>
        </fieldset>
    </form>
</div>

我认为您的代码几乎可以按照您的预期工作。 唯一明显的错误是你设置radioInterface.type = "submit";你可能意味着buttonSubmit.type = "submit";。

很明显，如果您实际上放入一些内容以使label等元素实际上可见，则可以正常工作......

也许是这样的东西？

var form = document.createElement("form");
var fieldset = document.createElement("fieldset");
var legend = document.createElement("legend");
var labelFunction = document.createElement("label");
labelFunction.textContent = 'Function'; // <-- added
var labelInterface = document.createElement("label");
labelInterface.textContent = 'Interface'; // <-- added
var labelComment = document.createElement("label");
labelComment.textContent = 'Comment'; // <-- added
var radioFunction = document.createElement("input");
radioFunction.type = "radio";
var radioInterface = document.createElement("input");
radioInterface.type = "radio";
var textarea = document.createElement("textarea");
var buttonSubmit = document.createElement("input");
buttonSubmit.type = "submit"; // <-- corrected

我相信您实际将它们添加到文档中的代码应该可以正常工作。

相关文章：