如何将JavaScript生成的div元素放置在主体div元素中

我尝试了几种不同的方法将JavaScript生成的条形图放入主div元素的主体中，但没有成功。有人知道如何做到这一点吗

编辑

下面是，看看我在说什么。正如你所看到的，我有一个在身体周围有边框的包装。但是，无论我将脚本放在哪里，我都无法将其放入包装器中。它总是在外部生成的

任何帮助都将不胜感激

这是代码

HTML

JavaScript

函数createBarChart（数据）{
//从容器开始。
var图表=document.createElement（“div”）；
//容器必须具有位置：相对。
chart.style.position=“relative”；
//图表的高度是其最大值
//数据项加上一点边距。
var高度=0；
对于（变量i=0；i

您的问题是将其附加到正文中，因此要将条形图从框中取出

如果您交换该行，它将被放入#包装器中：

 document.body.appendChild(chart);

为此：

 document.querySelector('#wrapper').appendChild(chart);

请注意，这在代码段的全屏模式下最为明显——在较小的屏幕上，当图形大于包含的包装时，需要解决溢出问题。我弹出了一个

overflow-x:auto

样式规则，显示它在包装器中

另外，您没有正确关闭脚本标记-因此我也解决了这个问题

函数createBarChart（数据）{
//从容器开始。
var图表=document.createElement（“div”）；
//容器必须具有位置：相对。
chart.style.position=“relative”；
//图表的高度是其最大值
//数据项加上一点边距。
var高度=0；
对于（变量i=0；ifunction createBarChart (data) {
    // Start with the container.
    var chart = document.createElement("div");

    // The container must have position: relative.
    chart.style.position = "relative";

    // The chart's height is the value of its largest
    // data item plus a little margin.
    var height = 0;
    for (var i = 0; i < data.length; i += 1) {
        height = Math.max(height, data[i].value);
    }
    chart.style.height = (height + 10) + "px";

    // Give the chart a bottom border.
    chart.style.borderBottomStyle = "solid";
    chart.style.borderBottomWidth = "1px";

    // Iterate through the data.
    var barPosition = 0;

    // We have a preset bar width for the purposes of this
    // example.  A full-blown chart module would make this
    // customizable.
    var barWidth = 25;
    for (i = 0; i < data.length; i += 1) {
        // Basic column setup.
        var dataItem = data[i];
        var bar = document.createElement("div");
        bar.style.position = "absolute";
        bar.style.left = barPosition + "px";
        bar.style.width = barWidth + "px";
        bar.style.backgroundColor = dataItem.color;
        bar.style.height = dataItem.value + "px";
        bar.style.borderStyle = "ridge";
        bar.style.borderColor = dataItem.color;

        // Visual flair with CSS Level 3 (for maximum compatibility
        // we set multiple possible properties to the same value).
        // Hardcoded values here just for illustration; a
        // full module would allow major customizability.
        bar.style.MozBoxShadow = "rgba(128, 128, 128, 0.75) 0px 7px 12px";
        bar.style.WebkitBoxShadow = "rgba(128, 128, 128, 0.75) 0px 7px 12px";
        bar.style.boxShadow = "rgba(128, 128, 128, 0.75) 0px 7px 12px";
        bar.style.MozBorderRadiusTopleft = "8px";
        bar.style.WebkitBorderTopLeftRadius = "8px";
        bar.style.borderTopLeftRadius = "8px";
        bar.style.MozBorderRadiusTopright = "8px";
        bar.style.WebkitBorderTopRightRadius = "8px";
        bar.style.borderTopRightRadius = "8px";
        bar.style.backgroundImage =
            "-moz-linear-gradient(" + dataItem.color + ", black)";
        bar.style.backgroundImage =
            "-webkit-gradient(linear, 0% 0%, 0% 100%," +
            "color-stop(0, " + dataItem.color + "), color-stop(1, black))";
        bar.style.backgroundImage =
            "linear-gradient(" + dataItem.color + ", black)";

        // Recall that positioning properties are treated *relative*
        // to the corresponding sides of the containing element.
        bar.style.bottom = "-1px";
        chart.appendChild(bar);

        // Move to the next bar.  We provide an entire bar's
        // width as space between columns.
        barPosition += (barWidth * 2);
    }

    return chart;
};

window.onload = function () {
    var colors = [{ color: "red", value: 40 },
          { color: "blue", value: 10 },
          { color: "green", value: 100 },
          { color: "black", value: 65 },
          { color: "yellow", value: 75 },
          { color: "purple", value: 120 },
          { color: "grey", value: 121 },
          { color: "orange", value: 175 },
          { color: "olive", value: 220 },
          { color: "maroon", value: 275 },
          { color: "brown", value: 300 },
          { color: "teal", value: 15 }
    ];

    var chart = createBarChart(colors);
    document.body.appendChild(chart);
};

 document.body.appendChild(chart);

 document.querySelector('#wrapper').appendChild(chart);