Is it possible to append data into a html element using DOM in Javascript?

Question

I have looked for duplicate questions, however many refer to adding data to XML please forgive me if I have missed something here but I need some help

so far I have this:

html page

<!DOCTYPE html>
<html>
<head>
<title>Template</title>
<script type="text/javascript" src="script/controlpanelAdmin.js"></script>
<script type="text/javascript" src="script/controlpanelModerator.js"></script>
<script type="text/javascript" src="script/jquery-1.12.0.js"></script>
<link rel="stylesheet" href="script/css.css" />
</head>
<body>
<fieldset id="control_panel">
<legend>Control Panel</legend>
</fieldset>

<p id="content"> Content </p>

</body>
</html>

controlpanelAdmin.js

window.onload = function() {

var controlpanel = document.getElementById("control_panel");
var para = document.createElement("p");
var att = document.createAttribute("admin");
var br = document.createElement("br");
var txt = document.createTextNode("Admin Control Panel");



controlpanel.appendChild(para);
para.setAttribute("id", att);
para.appendChild(txt);
para.appendChild(br);
}

controlpanelModerator.js

window.onload = function() {

var controlpanel = document.getElementById("control_panel");
var para = document.createElement("p");
var att = document.createAttribute("mod");
var br = document.createElement("br");
var txt = document.createTextNode("Moderator Control Panel");



controlpanel.appendChild(para);
para.setAttribute("id", att);
para.appendChild(txt);
para.appendChild(br);
}

When the page loads, 'Admin Control Panel' is written into the fieldset tag but is then replaced by: 'Moderator Control Panel'

I cannot for the life of me think how to append both lines (and maybe other data as well) into one element

window.onload is a single callback, which you are clobbering ... use window.addEventListener('load', function() { ... your code ...}) — Jaromanda X
– Jaromanda X, Commented Feb 14, 2016 at 0:52

Quentin · Accepted Answer · 2016-02-14 00:51:39Z

3

When the page loads, 'Admin Control Panel' is written into the fieldset tag but is then replaced by: 'Moderator Control Panel'

That can't happen. Admin Control Panel should never appear in the page.

script/controlpanelAdmin.js loads. It causes a value to be assigned to window.onload.
script/controlpanelModerator.js loads. It causes that value to be overwritten with a new one.
The page finishes loading
The load event fires
The function defined in script/controlpanelModerator.js is called

Don't assign values to window.onload. Use addEventListener instead.

addEventListener("load", function () { ... });

answered Feb 14, 2016 at 0:51

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ben jay hutton Over a year ago

Thank you very much it worked a treat. Back to school I go :-)

Greg Valcourt · Accepted Answer · 2016-02-14 00:51:51Z

1

You've got two onload functions competing. Can you merge them into one function?

answered Feb 14, 2016 at 0:51

Greg Valcourt

7416 silver badges13 bronze badges

1 Comment

ben jay hutton Over a year ago

they are seperated because I want some users that are moderators just to run code from: controlpanelModerator.js and admins to run both I just went the wrong way about loading them into DOM :-)

Collectives™ on Stack Overflow

Is it possible to append data into a html element using DOM in Javascript?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related