Geek Answers Handbook

Dynamically created nested div not displaying JavaScript

I have a part of JavaScript that is designed to dynamically create a nested div set in my application. The parent div is created just fine, but the inner div is not a rendering at all.

Any help would be great!

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); }

Highlighted HTML:

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

Desired HTML:

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

EDIT:

Thanks for the help, I partially answered my question ...

Further in my code there is another function that edits the contents of note_window.

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

When I comment on the code for installing innerHTML, both divs render correctly ... Now the question is ... Why ??

+4
source share
4 answers

Are you looking for this?

 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); } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="navbar">some content</div>
+1
source

Or this (in case everything needs to be created dynamically using 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); }

And HTML markup

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

Your code seems to work for me, I just changed the text to match your example. I have jsfiddle https://jsfiddle.net/yye4dsqm/3/

 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'; note_window.innerHTML = 'Text'; var title = document.createElement("div"); title.setAttribute("id", "title"); title.setAttribute("class", "col-md-12"); title.innerHTML = "More Text"; note_window.appendChild(title); var navbar = document.getElementById("navbar"); navbar.appendChild(note_window); } createWindow();
0
source

It seems so simple right now ...

In my editing, I mention that I set the innerHTML of the parent DIV, and then overrides the entire child DIV with the text. Setting a breakpoint after the initial creation shows correctly displayed items.

I have not seen this before when I was only looking at elements after a call was made to set innerHTML.

Thanks guys!

External perspective always helps! :)

0
source

More articles:


All Articles