Question

我有一段JavaScript，它意味着在我的应用程序中动态创建一组嵌套的Div。父Div正好被创建，但内部Div根本没有渲染。

任何帮助都会很棒！

JavaScript的：

function createWindow()
{
    var note_window = document.createElement("div");
    note_window.setAttribute("id", "note_window");
    note_window.setAttribute("class", "notification-window");
    note_window.style.visibility = 'visible';

    var title = document.createElement("div");
    title.setAttribute("id", "title");
    title.setAttribute("class", "col-md-12");
    title.innerHTML = "Notifications";
    note_window.appendChild(title);

    var navbar = document.getElementById("navbar");
    navbar.appendChild(note_window);
}

呈现HTML：

<div id="note_window" class="notification-window" style="visibility: visible;">
    Text
</div>

所需的HTML：

<div id="note_window" class="notification-window" style="visibility: visible;">
    Text
    <div id="title" class="col-md-12">
        More Text
    </div>
</div>

修改

感谢您的帮助，我已经部分回答了我自己的问题......

在我的代码中，还有另一个函数可以编辑note_window的内容。

    if (document.getElementById("note_window") == null)
    {
        createWindow();
        if (getNotifications() == null) {
            note_window.innerHTML = "Text"
        }
    }

当我注释掉设置innerHTML的代码时，两个Div的渲染都正确...现在的问题是......为什么！？

Answer 1

你在找这个吗？

＆＃13;

var note_window;
var title;
function createWindow()
{
    note_window = document.createElement("div");
    note_window.setAttribute("id", "note_window");
    note_window.setAttribute("class", "notification-window");
    note_window.style.visibility = 'visible';
    //note_window.innerHTML = "Text";

    title = document.createElement("div");
    title.setAttribute("id", "title");
    title.setAttribute("class", "col-md-12");
    title.innerHTML = "Notifications";
    note_window.appendChild(title);

    var navbar = document.getElementById("navbar");
    navbar.appendChild(note_window);
}

function getNotifications() {
  return null;
}

if (document.getElementById("note_window") == null)
    {
        createWindow();
        if (getNotifications() == null) {
          var text = document.createTextNode('Text');
          title.parentNode.insertBefore(text, title);
        }
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">some content</div>

＆＃13;

Answer 2

或者这个（如果需要通过JavaScript动态创建所有内容）：

http://plnkr.co/edit/3pNmY3UnqbgZWpSFVH66?p=preview

function createWindow()
    {
        var note_window = document.createElement("div");
        var title = document.createElement("div");
        var navbar = document.createElement("div");

        note_window.setAttribute("id", "note_window");
        note_window.setAttribute("class", "notification-window");
        note_window.style.visibility = 'visible';

        title.setAttribute("id", "title");
        title.setAttribute("class", "col-md-12");
        title.innerHTML = "Notifications";

        navbar.setAttribute("id", "navbar");
        note_window.appendChild(title);
        navbar.appendChild(note_window);
        document.getElementsByTagName('body')[0].appendChild(note_window);
    }

HTML标记

<body onload="createWindow()"></body>

Answer 3

您的代码似乎对我有用，我刚修改了文本以符合您的示例。我有一个jsfiddle https://jsfiddle.net/yye4dsqm/3/

<file-size-threshold>

Answer 4

现在看起来很简单......

在我的编辑中，我提到我正在设置父DIV的innerHTML，然后用文本覆盖整个子DIV。在初始创建后设置断点显示正确呈现的元素。

之前我没有看到它，因为在调用innerHTML之后我只查看了元素。

谢谢你们！

外部视角总是有帮助的！ :)

动态创建嵌套Div不呈现JavaScript

4 个答案: