Adding elements to a webpage

Question

I have this code that I've edited: http://pastebin.com/vrqHek6S I've put in comments where I edited. Lines 75-75 & Lines 156-166

How would I get these edits from an external java-script file... I've tried for 3 hours to learn how to use "document.body.appendChild" "document.createElement" & "divTag.innerHTML" and I've gotten no where.

Thanks, Andrew Pearson

ps. This is my first post so if I did something wrong please tell me

Edit: this is what i've tired http://pastebin.com/ZaJJYsPq

   Potatoswatter you are correct

Edit: Sorry guys its late and my mind just isn't working how it should. What I'm trying to do is create Div and fill the div with the Lines I listed, but I want to do this with pure js since I can't do any major edits on the html page (I can only add external js to the head.

There's no JavaScript in the indicated edits. "How would I get these edits from an external java-script file..." — do you want JavaScript code that would add the those HTML elements to the page? — Potatoswatter
– Potatoswatter, Commented Jun 19, 2012 at 3:37
Do you want us to give you the JavaScript code that will do this edit instead of you? If so, show what have you tried already. — Tadeck
– Tadeck, Commented Jun 19, 2012 at 3:37
If you could try to show a simplified example of the problem (i.e. one that is less than 1000 lines of code) it'd be a lot easier on the eyes. Plus I'm not entirely sure what it is you are asking. What does "get these edits" mean? — David John Welsh
– David John Welsh, Commented Jun 19, 2012 at 3:48
@Andrew35133, pease make sure small samples of code that demonstrate your problem are present in the question. Rigth now there is no code in your question (links don't count). — Alexei Levenkov
– Alexei Levenkov, Commented Jun 19, 2012 at 4:19

Derek 朕會功夫 · Accepted Answer · 2012-06-19 03:45:34Z

2

So you want to know how to insert elements into DOM. Here are the links to MDN:

.appendChild - https://developer.mozilla.org/en/DOM/element.appendChild
.createElement - https://developer.mozilla.org/en/DOM:document.createElement
.innerHTML - https://developer.mozilla.org/en/DOM:element.innerHTML

You can learn new things in MDN. It is a good reference site.

answered Jun 19, 2012 at 3:45

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

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

Comments

Charlie · Accepted Answer · 2012-06-19 03:46:27Z

0

From the little bit of JS you included, it looks like you're trying to create a div through pure JS, but your JS is wrong.

divTag.innerHTML = "<a class=\"sidetab\" href=\"#tab_dynmap\" id=\"tabhead_dynmap\"><img src=\"Images/DynMap.png\" alt=\"DynMap\" /><span>DynMap</span></a>";

You need to escape your quotes.

--

How would I get these edits from an external java-script file.

I'd copy and paste...

Lines 75-75 & Lines 156-166

These lines do not contain any JS:

 <a class="sidetab" href="#tab_dynmap" id="tabhead_dynmap"><img src="Images/DynMap.png" alt="DynMap" /><span>DynMap</span></a>

<div class="tabarea" id="tab_dynmap">
                        <h3>DynMap</h3>
                        <img src="Images/Map.png" alt="dynmap" class="tabimg"/>
                        <div class="tabcontents">
                            <div id="mapArea">
                                                <iframe src="http://mc.zephyrgaming.net/Dynmap/" height="500px" width="100%"> </iframe>
                            </div>
                        </div>
                    </div>

answered Jun 19, 2012 at 3:46

Charlie

11.7k19 gold badges88 silver badges141 bronze badges

6 Comments

Andrew35133 Over a year ago

Right I am trying to create a div from pure js. So my problem is I'm not allowed to mess with the html body just the head. I need away to call a js to create the div i need :/ I'm just lost and its getting late so I'm mind is not working how it should.

Charlie Over a year ago

For starters, your JS is invalid. Look at my comment, you need to escape your quotes.

Andrew35133 Over a year ago

Sorry I don't know what escape your quotes mean :/ I'm new at this, sorry

Andreas Wong Over a year ago

He means, since your markup string contains " <a class="<-- this, you need to escape it so that they are part of the string, and not interpreted as javascript code. You escape those using backslash (\): var string = "Alerting double quotes (\")"; alert(string);

Andrew35133 Over a year ago

Ohhh, now I see his example and how he "escaped". So when I'm writing js and I need to write html or something with a " that doesn't need to be read as js i need to put a \ in front of the "?

|

Collectives™ on Stack Overflow

Adding elements to a webpage

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related