This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 5 years ago.
Would anyone know why I’m able to get my code to run on codepen, but not on my desktop? I keep getting a “can't read appendChild” error when I run my code on my desktop. I am new to coding and just started teaching my self how to manipulate the DOM.
https://codepen.io/unicorn1/pen/JpYqjJ
const container = document.querySelector('#container');
const content = document.createElement('div');
content.classList.add('content');
content.textContent = 'Dom text-content!';
container.appendChild(content);
Error Message
the script should be put at the bottom before the body ends
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>
THE TITLE OF YOUR WEBPAGE
</h1>
<div id="container"></div>
<script>
const container = document.querySelector('#container');
const content = document.createElement('div');
content.classList.add('content');
content.textContent = 'Dom text-content!';
container.appendChild(content);
</script>
</body>
</html>
or you can put the content of script in the window.onload callback like this:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
window.onload = function() {
const container = document.querySelector('#container');
const content = document.createElement('div');
content.classList.add('content');
content.textContent = 'Dom text-content!';
container.appendChild(content);
};
</script>
<h1>
THE TITLE OF YOUR WEBPAGE
</h1>
<div id="container"></div>
</body>
</html>
the principle is that,you can manipulate DOM after the DOM have loaded;you can't manipulate DOM before loaded.that is how window.onload and script position works;
also ,you can change the window.onload to DOMContentLoaded
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
document.addEventListener('DOMContentLoaded', function() {
const container = document.querySelector('#container');
const content = document.createElement('div');
content.classList.add('content');
content.textContent = 'Dom text-content!';
container.appendChild(content);
}, false);
</script>
<h1>
THE TITLE OF YOUR WEBPAGE
</h1>
<div id="container"></div>
</body>
</html>
Related
How can I embed an iframe using JavaScript, that's being displayed where the code's being added? The code below displays the iframe ONLY above the footer, no matter where I add the code, whether it's in the header or the body.
var iframe_tag = document.createElement("iframe");
iframe_tag.setAttribute("src", "https://wikipedia.com");
iframe_tag.style.width = "100%";
iframe_tag.style.height = "480px";
document.body.appendChild(iframe_tag);
I know there are simpler ways to show an iframe, but I can only use JavaScript.
When you use document.body.appendChild it is identical to just writing in the new html at the bottom, or literly appending the element to the bottom
This means that regardless of where the script is, it will always do this
instead you should append to a predefined div (<div id="iframecontainer"> </div>)
let container = document.getElementById("iframecontainer");
container.appendChild(iframe_tag);
minimal example:
<!DOCTYPE html>
<html>
<body>
<script>
let iframe = document.createElement("iframe");
iframe.src = "https://wikipedia.com/";
window.onload = () => {
document.body.appendChild(iframe);
}
</script>
</body>
</html
In my opinion you should, instead of creating an appending an element, just set the src of a pre-existing iframe (<iframe id="iframe"> </iframe>)
let iframe_tag = document.getElementById("iframe");
iframe.src = "https://wikipedia.com";
minimal example:
<!DOCTYPE html>
<html>
<body>
<iframe id="iframe"> </iframe>
<script>
let iframe;
window.onload = () => {
iframe = document.getElementById("iframe");
iframe.src = "https://www.wikipedia.com/";
}
</script>
</body>
</html
I am trying to manipulate an iframe (chatbox) when loaded on a webpage.
The chatbox loads four iframes with changing id with each pageload.
Because the iframe that needs to be manipulated is the last / 4th of the list, i used get elements by tagname ("iframe").
However, no style is added to the last iframe:
<script>
window.onload = function() {
let myiFrame = document.getElementsByTagName("iframe");
let doc = myiFrame[3].contentDocument;
doc.body.innerHTML = doc.body.innerHTML + "<style>iframe{dispay:block !important}</style>";
}</script>
use
myiFrame[3].style.cssText = "display:block !important"
your code will become
<script>
window.onload = function() {
let myiFrame = document.getElementsByTagName("iframe");
myiFrame[3].style.cssText = "display:block !important";
}
</script>
Sample working code:
<!DOCTYPE html>
<html>
<body>
<p id="myP1" style="display: none!important">This is some text.</p>
<input type="button" onclick="demoDisplay()" value="Show">
<script>
function demoDisplay() {
document.getElementById("myP1").style.cssText = "display:block !important";
}
</script>
</body>
</html>
I have some toast notifications. I gave them a position "absolute" and want them to place themselves on their own.
New toasts should place themselves above the already existing ones. The old one would move down then.
So this is my important Div:
CreateWrapper(toastMessage, foreColor, borderColor, backgroundColorIconDiv, backgroundColorContentDiv) {
var wrapperDiv = document.createElement("div");
var width = 350;
wrapperDiv.id = "toast_" + this.toastCounter;
wrapperDiv.style.position = "absolute";
wrapperDiv.style.left = "50%";
wrapperDiv.style.display = "none";
wrapperDiv.style.width = width + "px";
wrapperDiv.style.height = "100px";
wrapperDiv.style.border = "2px solid " + borderColor;
wrapperDiv.style.borderRadius = "10px";
wrapperDiv.onclick = function() {
wrapperDiv.remove(); // Destroy the toast by clicking on it
}
document.body.appendChild(wrapperDiv);
}
and after creating it I use this code for some animations and destroying it:
var thisToast = this.toastCounter - 1; // get the toast Id
$(document).find("#toast_" + thisToast)
.fadeIn(750)
.delay(3000)
.fadeOut(750, function() {
$(this).remove(); // Destroy the toast
});
Here's a picture of what I am looking for
Check out this JSBIN.
You can use Bootstrap's grid system to make things a little easier.
You should never really use absolute layout, it makes responsive webpages impossible - take a look at what happens when you resize your browser.
You will want to have a look at the Element API.
var container = document.querySelector('div.container');
var newDiv = document.createElement('div');
newDiv.innerHTML = "HELLO WORLD";
container.prepend(newDiv);
And the accompanying HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/#reactivex/rxjs#5.0.3/dist/global/Rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/expect/1.20.2/expect.js"></script>
<div class="container">
hey
</div>
</body>
</html>
The method you are looking for is prepend()
I have a complete HTML5 page in a JSON object, I have to show it to my page inside a div or iframe. Following is sample code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
window._reviewWidget = {
onReady: function () {
var block1 = {
voyagerId:"xxxxxxx",
container: "container",
flavour:"small"
};
_reviewWidget.loadReview(block1);
}
};
(function (W,i,D,G,E,T)
{
W[G] = W[G] || {};
T = i.getElementsByTagName(D)[0];
E =i.createElement(D);
E.async = 1;
E.src ='/js/reviewWidget.js';
T.parentNode.insertBefore(E, T);
})(window, document,'script','_reviewWidget');
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
When I am trying to put the code in div or iframe getting just container div, header part and body, HTML tag missing. I know we can't put such tags in div so I tried an iframe as well. But same issue either can see whole code as text or just container div.
Iframe code i am using (html_code JS variable with above HTML code)
Type-1
$('#HtmlFrame').contents().find('body').html(html_code);
Type-2
var iframe = document.createElement('iframe');
var ctnr = document.getElementById('Ewidget');
ctnr.appendChild(iframe);
iframe.contentWindow.document.open('text/htmlreplace');
iframe.contentWindow.document.write(html_code);
iframe.contentWindow.document.close();
Thanks.
I need to change variable value of parent window from child window
I am doing this way
parent.html
var check_var = false;
var myWindow = window.open("child.html", "", "width=auto, height=auto");
alert(check_var);// alerts false
child.html
window.opener.check_var=true=;
But its not working alerting false insted of true
Please see and suggest any way to do it
Thanks
window.open starts the process of opening the window, but then your JavaScript code continues while the page is loaded. So your alert is happening before the child window is loaded and before the code in it modifies the variable.
Assuming check_var is a global, opener.check_var is indeed how you access that variable from child.html. It's just a timing thing.
You have several options for learning when the child has loaded:
Have the child use postMessage to send a message to the parent.
Have the child use opener.someFunction() to call a global function in the parent.
Use myWindow.onload = function() { alert(check_var); }; to hook the load event on the child window, and then alert the value. Provided the code in child.html is in a script block and not waiting for some event, it will run before the load event fires.
Here's a complete working example:
parent.html:
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<title>Parent</title>
</head>
<body>
<input type="button" id="the-button" value="Click to Open Child">
<script>
var check_var = false;
document.getElementById("the-button").onclick = function() {
var wnd = window.open("child.html");
wnd.onload = function() {
var p = document.createElement('p');
p.innerHTML = "check_var = " + check_var;
document.body.appendChild(p);
};
};
</script>
</body>
</html>
child.html:
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<title>Child</title>
</head>
<body>
<script>
var p = document.createElement('p');
if (opener) {
opener.check_var = true;
p.innerHTML = "Set check_var";
} else {
p.innerHTML = "No opener";
}
document.body.appendChild(p);
</script>
</body>
</html>