We Keep Coding

How to append only node's child nodes?

Assuming the following node(s) (which is/are actually not generated like this):
let outer = document.createElement('div');
outer.innerHTML = `
<div>foo</div>
<div>bar</div>
.
.
.
<div>whatever</div>
`;
Now I can append outer to another node:
let body = document.querySelector('body');
body.append(outer);
But how to append only the inner of outer without loosing event listeners etc.?

Call append() with each child of outer as a separate argument by using the ... syntax to spread an iterable.
body.append(...outer.children);

To answer your "without losing event handlers" - it turns out your are not when you append
Without delegation
let outer = document.createElement('div');
outer.classList.add("outer")
outer.innerHTML = `
<div class="foo" onclick="console.log('Foo clicked')">foo</div>
<div class="bar">bar</div>
<div>whatever</div>
`;
let body = document.querySelector('body');
body.append(outer);
body.append(...outer.children);
.outer { height:100px; width:100px; border: 1px solid red;}
With delegation from body
let outer = document.createElement('div');
outer.classList.add("outer")
outer.innerHTML = `
<div class="foo">foo</div>
<div class="bar">bar</div>
<div>whatever</div>
`;
let body = document.querySelector('body');
body.append(outer);
body.append(...outer.children);
body.addEventListener("click", e => {
const tgt = e.target;
if (tgt.matches(".foo")) console.log("Foo clicked")
else if (tgt.matches(".bar")) console.log("Bar clicked")
})
.outer { height:100px; width:100px; border: 1px solid red;}

Multiple elements using appendChild for table

I have the following input and button
const inputNotice = document.createElement("input");
inputNotice.type = "text";
r.insertCell(26).appendChild(inputNotice.cloneNode(true));
//new button
const Noticebutton = document.createElement("button");
Noticebutton.type = "button";
Noticebutton.textContent = "Send Notice";
r.insertCell(26).appendChild(Noticebutton);
Im trying to get the input field and button to sit in 1 cell in the table, it creates these in 2 separate cells.

create a div having input and button as children and then append this as the child of the cell like this:
const div= document.createElement('div');
const inputNotice = document.createElement('input');
const Noticebutton = document.createElement("button");
div.appendChild(inputNotice);
div.appendChild(NoticeButton);

Since there is no html template provided, I have had one of my own to do the illustration.
The idea is to add both of the elements inside a container and then append that container to the cell as a child.
In the following illustration I have used a div as a container. Feel free to choose one of which that suits the needs.
Illustration
const nonWorkingRow = document.querySelector('#cell-host-non-working');
const inputNotice = document.createElement("input");
inputNotice.type = "text";
// inputNotice.style.display = 'inline block';
nonWorkingRow.insertCell(0).appendChild(inputNotice.cloneNode(true));
//new button
const Noticebutton = document.createElement("button");
Noticebutton.type = "button";
Noticebutton.textContent = "Send Notice";
// Noticebutton.style.display = 'inline block';
nonWorkingRow.insertCell(0).appendChild(Noticebutton.cloneNode(true));
const workingRow = document.querySelector('#cell-host');
const container = document.createElement('div');
container.appendChild(inputNotice);
container.appendChild(Noticebutton);
workingRow.insertCell(0).appendChild(container);
.column-bordered-table thead td {
border-left: 1px solid #c3c3c3;
border-right: 1px solid #c3c3c3;
}
.column-bordered-table td {
border-left: 1px solid #c3c3c3;
border-right: 1px solid #c3c3c3;
}
.column-bordered-table tfoot tr {
border-top: 1px solid #c3c3c3;
border-bottom: 1px solid #c3c3c3;
}
<h1>Non Working</h1>
<table id="row-host-non-working" class="column-bordered-table">
<tr id="cell-host-non-working" style="outline: thin solid">
<td>
<p>Hello</p>
</td>
</tr>
</table>
<h1>Working</h1>
<table id="row-host-working" class="column-bordered-table">
<tr id="cell-host" style="outline: thin solid">
<td>
<p>Hello</p>
</td>
</tr>
</table>
WYSIWYG => WHAT YOU SHOW IS WHAT YOU GET

Instead of inserting a new cell twice (which is the cause of your problem), do that only once and work with the reference insertCell provides:
const cell = r.insertCell(26);
const inputNotice = document.createElement("input");
inputNotice.type = "text";
const Noticebutton = document.createElement("button");
Noticebutton.type = "button";
Noticebutton.textContent = "Send Notice";
cell.append(inputNotice, Noticebutton);
Notice I'm using append here, not appendChild, because it allows to pass a number of elements to it rather than just one.

css not affecting div

I made this function to make 16 columns and rows.but I want the div that they are in to be on the right side, so for some reasons, I can't seem to change the div through (inline) css. I'm guessing its a problem with the function? Thanks for the help.
<html>
<body>
<div id="buttonContainer">
<button></button>
</div>
<div id="gridContainer" style = "left: 500px;">
</div>
</body>
<script>
const buttons = document.querySelector("#buttonContainer");
const btn1 = document.createElement("button");
btn1.classList.add("btn1");
buttonContainer.appendChild(btn1);
function divs(){
const gridContainer = document.querySelector("#gridContainer");
for(var i = 0; i < 17; i++){
var row = document.createElement("div");
row.className = "row";
for(var x = 1; x <= 17; x++){
var cell = document.createElement("div");
cell.className = "gridsquare";
cell.innerText = (i);
row.appendChild(cell);
}
gridContainer.appendChild(row);
}
}
divs();
</script>
</html>

There are different ways to move a div to the right. One is to give it a position:absolute (so it can move around freely) and then apply right : 0.
I have also removed the glitchy <button part.
const buttons = document.querySelector("#buttonContainer");
const btn1 = document.createElement("button");
btn1.classList.add("btn1");
buttonContainer.appendChild(btn1);
function divs() {
const gridContainer = document.querySelector("#gridContainer");
for (var i = 0; i < 17; i++) {
var row = document.createElement("div");
row.className = "row";
for (var x = 1; x <= 17; x++) {
var cell = document.createElement("div");
cell.className = "gridsquare";
cell.innerText = (i);
row.appendChild(cell);
}
gridContainer.appendChild(row);
}
}
divs();
#gridContainer{
position : absolute;
right: 0;
}
<div id="buttonContainer"></div>
<div id="gridContainer"></div>
EDIT : more modern/robust solution with Flexbox
The problem with position:absolute is that it kind of "detaches" the element from the rest of the DOM, so other elements start placing themselves underneath it, and it can quickly cause layout nightmares.
Here's an alternative with Flexbox :
.parent{
border : blue solid 2px;
height: 200px;
width: 100%;
display: flex;
justify-content: flex-end;
}
.child {
flex-basis : 150px; /* This is like width:150px */
background : green;
}
<div class="parent">
<div class="child"></div>
</div>

How to copy a cloned node in an iframe to its parent with styles?

I'm trying to clone a <div> in an <iframe>, and append the cloned div to the parent DOM. I keep the div as display: none to start (when in the iframe), and I make it visible when I clone it in the parent. This all works fine, and here's a minimal snippet:
The parent (top.html):
<iframe src=foo.html></iframe>
The iframe (foo.html)
<html>
<HEAD>
<style>
#myid {
display: none;
}
</style>
</HEAD>
<body onload="onload()">
<script>
function onload() {
var div = document.getElementById("myid");
var newdiv = div.cloneNode(true);
var body = parent.document.getElementsByTagName("body")[0];
newdiv.id = "new" + div.id;
newdiv.style.display = "block";
newdiv.style.position = "absolute";
newdiv.style.top = "100px";
newdiv.style.left = "100px";
newdiv.style.width = "100px";
newdiv.style.height = "100px";
newdiv.style.background = "red";
body.appendChild(newdiv);
};
</script>
<div id=myid>
<p>foo
</div>
</body></html>
My issue that I would like to use internal css to define #myid WHEN THE DIV IS CLONED INTO THE PARENT. But, once the the div is cloned, it only references the CSS in the parent... I'm not (readily) able to modify the CSS of the parent.
Can I make the internal CSS "stick" to the div when it gets cloned?
For example, if I delete the line above:
newdiv.style.background = "red";
And instead add to the internal CSS:
background: red;
The red doesn't stay once I clone the div to the parent.
My only other solution is to just do it all inline, by changing the div, like:
<div id=myid style="background: red;">
And that works, its just that I have a lot of CSS and it's a mess to maintain that way.

My solution to this (from #charlietfl's suggestion) was to add:
newdiv.style.cssText = window.getComputedStyle(div).cssText;
to copy the computed CSS to the cloned div. Now I can add background: red to the internal CSS, and it is "stuck" to the clone.
The final solution is below:
<html>
<HEAD>
<style>
#myid {
/* Added style here */
background: red;
display: none;
}
</style>
</HEAD>
<body onload="onload()">
<script>
function onload() {
var div = document.getElementById("myid");
var newdiv = div.cloneNode(true);
var body = parent.document.getElementsByTagName("body")[0];
/* Copy styles here */
newdiv.style.cssText = window.getComputedStyle(div).cssText;
newdiv.id = "new" + div.id;
newdiv.style.display = "block";
newdiv.style.position = "absolute";
newdiv.style.top = "100px";
newdiv.style.left = "100px";
newdiv.style.width = "100px";
newdiv.style.height = "100px";
body.appendChild(newdiv);
};
</script>
<div id=myid>
<p>foo
</div>
</body></html>

Want to fetch the id of the different div elements on the click of p element using javascript

I have a page with p tags and div element, the div element is set with display:none in the starting so, I just want to display the different divs as shown below inside the body tag on the click of the p tag but i got stuck in fetching the different id of the divs. Please do help me out from this situation.Below is my code. Thanks
<script>
function toggle(id)// here is the function which gets the different ids of the div
{ var element = document.getElementById(id);
for(i=1; i<3; i++)
{
if(element[i].style.display == "none")
{
element[i].style.display = "block";
}
else
{
element[i].style.display = "none"
}
}
}
</script>
<body>
<p onclick="toggle('div1')">Sentence1</p>
<p onclick="toggle('div2')">Sentence2</p>
<div id="div1" name="Name 1" style="display:none; width:400px; height:300px; border:1px solid black; background-color:yellow;" id="div1">Barun Ghatak</div>
<div id="div2" style="display:none; width:400px; height:300px; border:1px solid black; background-color:black;" id="div2">Bhoopi</div>
</body>

You only have one of each div, so you don't need the loop. Just use
function toggle(id)// here is the function which gets the different ids of the div
{
var element = document.getElementById(id);
if(element.style.display == "none")
{
element.style.display = "block";
}
else
{
element.style.display = "none"
}
}

document.getElementById returns a single object and not an array.
If you want to get both the divs, I suggest using a class to get them.

If you wanted to only show one at a time, for example if you were building a tabs, then you could use this code to hide all the other divs first, then show only the one you want to toggle. Otherwise, if you're happy to toggle them, you can use the code posted by the others.
JS Fiddle demo: http://jsfiddle.net/ecs77e9a/
HTML
<p onclick="toggle('div1');">Sentence1</p>
<p onclick="toggle('div2');">Sentence2</p>
<div id="content">
<div id="div1" name="Name 1" style="display:none; width:400px; height:300px; border:1px solid black; background-color:yellow;" id="div1">Barun Ghatak</div>
<div id="div2" style="display:none; width:400px; height:300px; border:1px solid black; background-color:black;" id="div2">Bhoopi</div>
</div>
JS
function toggle(id)
{
//Hide all other divs first
var divs = document.getElementById('content').childNodes;
for ( var i = 0; i < divs.length; i++ ) {
if ( divs[i].nodeName == "DIV" ) {
var div = document.getElementById(divs[i].id);
div.style.display = "none";
}
}
//Show the one that's being requested
var element = document.getElementById(id);
element.style.display = "block";
}