使用 JavaScript 创建和附加嵌套的 div 元素

Question

我正尝试在网页加载时使用JavaScript更新CSS布局。我的代码如下所示：

var container = 0; // Add Total UI
var containerTitle = 0; // Container Title

var article = 0; 
var articleTitle = 0;

var divName = 0; // temp variable for article id names
var divNameT = 0; // temp variable for title id names

function setLayout(id) {
    container = document.getElementById(id);

    for(var x = 0; x < 18; ++x) {
        // CREATE CONTAINER FOR ALL PANELS
        divName = "articleCon"+ x;
        article = document.createElement('div');
        article.id = divName;
        // SETUP CSS STYLE
        article.style.cssText = 'height: 205px; width: 300px; background: red; margin-right: 20px; margin-bottom: 20px; display: block; float: left;';

        setNewsTitle(count,divName); // Function Call to set Title Panel

        container.appendChild(article);
    }
}

function setNewsTitle(count,id) {
    containerTitle = document.getElementById(id);
    // CREATE CONTAINER FOR TITLE
    divNameT = "articleTitle"+ count;
    articleTitle = document.createElement('div');
    articleTitle.id = divNameT;
    // SETUP CSS STYLE
    articleTitle.style.cssText = 'position: absolute; height: 45px; width: 100px; background: yellow; display: inline;';

    containerTitle.appendChild(articleTitle);
}

当我在不调用 function setNewsTitle(count,id) 的情况下编译我的代码时，所有 CSS 元素都工作正常。我在这里面临的问题是每当进行函数调用时，我的页面都会显示为空白。屏幕上没有任何显示。

我尝试添加屏幕截图以便更好地理解，但我还没有声誉。

Answer 1

尝试...

    container.appendChild(article);
    setNewsTitle(x,divName); // Function Call to set Title Panel

文章需要在 setNewsTitle 是运行之前就位，因为您正在按 ID 查找元素。另外，你没有 count，你有 x ...

jsFiddle: http://jsfiddle.net/rfornal/o1wyae74/

Answer 2

试试这个，在调用函数集 NewsTitle 之前在 DOM 中追加 child，用 x 替换 count :

var container = 0; // Add Total UI
var containerTitle = 0; // Container Title

var article = 0; 
var articleTitle = 0;

var divName = 0; // temp variable for article id names
var divNameT = 0; // temp variable for title id names

function setLayout(id) {
    container = document.getElementById(id);

    for(var x = 0; x < 18; ++x) {
        // CREATE CONTAINER FOR ALL PANELS
        divName = "articleCon"+ x;
        article = document.createElement('div');
        article.id = divName;
        // SETUP CSS STYLE
        article.style.cssText = 'height: 205px; width: 300px; background: red; margin-right: 20px; margin-bottom: 20px; display: block; float: left;';

        container.appendChild(article);

        setNewsTitle(x,divName); // Function Call to set Title Panel

    }
}

function setNewsTitle(count,id) {
    containerTitle = document.getElementById(id);
    // CREATE CONTAINER FOR TITLE
    divNameT = "articleTitle"+ count;
    articleTitle = document.createElement('div');
    articleTitle.id = divNameT;
    // SETUP CSS STYLE
    articleTitle.style.cssText = 'position: absolute; height: 45px; width: 100px; background: yellow; display: inline;';

    containerTitle.appendChild(articleTitle);
}

Answer 3

您的代码中有 2 个问题：

您实际上还没有将元素添加到 DOM，因此当您在函数 setNewsTitle() 中尝试 document.getElementById - 它不会找到任何东西.
您在 setNewsTitle(count,id) 的方法调用中出错。您超过了 "count"，但计数不存在。您需要将其称为 setNewsTitle(x, divName) 但只有在您调用 container.appendChild(article).

setLayout 函数最终会是这样的：

function setLayout(id) {
    container = document.getElementById(id);

    for(var x = 0; x < 18; ++x) {
        // CREATE CONTAINER FOR ALL PANELS
        divName = "articleCon"+ x;
        article = document.createElement('div');
        article.id = divName;
        // SETUP CSS STYLE
        article.style.cssText = 'height: 205px; width: 300px; background: red; margin-right: 20px; margin-bottom: 20px; display: block; float: left;';

        // Add it to the DOM first
        container.appendChild(article);
        // need to pass "X", not count
        setNewsTitle(x,divName); // Function Call to set Title Panel
    }
}

使用 JavaScript 创建和附加嵌套的 div 元素

Using JavaScript to create and append nested div elements

html

javascript

css