DOM & Events - Adding & Removing Elements !!!Please help!!!

Question

DOM & Events - Adding & Removing Elements !!!Please help!!!

<div id="demo">some content</div>

<div id="demo2">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<div id="demo3">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

//calling the function in windo.onload to make sure the HTML is loded
window.onload = function() {
//creating a new paragraph
var p = document.createElement("p");
var node = document.createTextNode("some new text");
//adding the text to the paragraph
p.appendChild(node);

var div = document.getElementById("demo");
//adding the paragraph to the div
div.appendChild(p);
};

document.write("<br/>");

//calling the function in window.onload to make sure the HTML is loaded
window.onload = function() {
var parent = document.getElementById("demo2");
var child = document.getElementById("p1");
parent.removeChild(child);
};

document.write("<br/>");

//calling the function in window.onload to make sure the HTML is loaded
window.onload = function() {
var p = document.createElement("p");
var node = document.createTextNode("This is new");
p.appendChild(node);

var parent = document.getElementById("demo3");
var child = document.getElementById("p1");
parent.replaceChild(p, child);
};

why does this not all work on the same page together when I run it? can someone please help me with this question what am I doing wrong?

Answer 1

Don't use 'document.write()' for outputing <br> elements: you're not, as Php, generating the current html file, but your are at run-time... So, you make attention your code "make sure the HTML is loaded" by put it in the 'window.onload' event attribute ;) Well, with 'document.write' you clear the content of your html page and send to it a new stream of text ^^

Alright, instead insert your <br> NODE element as you do for your <p> node element ;) ... even if, there's shortcut to do insertion ( not ever as effective, use it cautiously ), with use of attribute 'innerHTML' of html node elements:

document.getElementByTagName("body")[0].innerHTML = "<h1>Dynamic HTML content</h1>";

Obviously, the behaviour for a simple affectation is to replace all the content ( so the childs nodes ) with a fresh html parsing of the string given. But you can preserve in a certain measure the content, by reading and concatenate is value with the new one ( in fact, html content is converted to string, then parsing a new time, so it could reset some part, as a <canvas> element ):

e=document.getElementById("demo");
e.innerHTML+="<p>some new texte</br>"; // with the += operator, I do 'a+=b' instead of 'a=a+b' with the same result...

Answer 2

Oh, yeah Oo... time to copy and see your js again with syntaxic colouring:

You've another mistake, I havn't seen previously, that you cannot put ( by this way ) more than one function in the window.onload attribute ^^
So, when you do each affectation, you delete the previous content, so only the last function will be running :P

The simplest solution, is to set it with an initialization function, which will call each of your needs ;)

document.onload=function init() {
my_func1();
my_func2();
my_func3();
}

Obviously, you need to name your others functions to call them, and you are not obligated to name the one you set in onload event.

[ EDIT ]
And very good idee to not keep more than one element for a unique id :)

Answer 3

Ok.

I suggest you to modify as next:

- name your 3 functions ( ie: f1, f2, f3 ), and don't affect them to window.onload ( so, replace all lines "window.onload = function() {" by "function fn() {" );
- add these 3 lines to html ( as you want it, begining, ending... ) to display 3 button, with their event attribute 'onclick' set with the call to each of your function ( I've used names fn() ):

<button type="button" onclick="f1();">call f1()</button>
<button type="button" onclick="f2();">call f2()</button>
<button type="button" onclick="f3();">call f3()</button>

It's more useful to handle your test by this way, because else you don't see each step of changement ;)

About your question, read again my first answer, I tell you "why it wont all work on page page together" --> document.write() delete the document content ( html elements of the page ) and start sending a new text stream ( only the first 'write' clear all the document, next will appends )...

Answer 4

Go here to see the complete code: https://code.sololearn.com/WccpdsQ5ctHp/#html

Answer 5

( in my last suggestion, it was'nt anymore question to put an init' function in the onload event ;) )

Answer 6

<div id="demo3">
<p id="p3">This is a paragraph.</p>
<p id="p4">This is another paragraph.</p>
</div>

//calling the function in window.onload to make sure the HTML is loaded
window.onload = function() {
var p = document.createElement("p");
var node = document.createTextNode("This is new");
p.appendChild(node);

var parent = document.getElementById("demo3");
var child = document.getElementById("p3");
parent.replaceChild(p, child);
};

Ok I just got one working but only one :/ and I changed it as you can now see to a p3 and a p4 but the two previous ones on the page still wont execute on the page together with it, I will say this they do work individual but that wont help me if I want to fit it all on one HTML page and on one JavaScript page so still need help understanding this! its like the div element does not really work in this instance if you see what I'm trying to say.

Answer 7

I was only attempting to use the document.write("<br/>"); as a way of braking the other code from each part of the JavaScript and it was not affective so I did remove it, but you still did not explain to me the reason why it wont all work on one page together, I do appreciate you help btw! can you explain this please? or anyone else please.

Answer 8

document.onload=function init() {
my_func1();
my_func2();
my_func3();
}

This may sound really stupid but how do I put this in this lol can you give me an example of just putting in the my_func3();

<div id="demo3">
<p id="p3">This is a paragraph.</p>
<p id="p4">This is another paragraph.</p>
</div>

//calling the function in window.onload to make sure the HTML is loaded
window.onload = function() {
var p = document.createElement("p");
var node = document.createTextNode("This is new");
p.appendChild(node);

var parent = document.getElementById("demo3");
var child = document.getElementById("p3");
parent.replaceChild(p, child);
};

Answer 9

thank you so much for your help!