Re: Javascript DOM Problem creating elements and appeding them insertBefore

Wednesday, October 9, 2013


If I understand your issue correctly, you need to scroll the page up and down through JavaScript.

I understand that you need a static page for the sales force.  Note that you can load a  LAMP stack very easily into a tablet these days.  I use Bit Web Server on my Android Tablet and Phone.

Also, the method of interacting with the DOM you're using is trouble some to begin with. I suggest using JQuery. I think you'll find that your life becomes a lot easier when you don't have to worry about specific browser implementations for your JavaScript.  And, my examples will demonstrate how to scroll the page using JQuery calls.

To make this easy, and for the purposes of giving you a crash course in JQuery, JQuery locates elements in the DOM based through 3 types of css selectors: ID, Class, and Name.

$("#[ ID property value]") .. finds one element with the specific ID property value
$(".[ ClassName]") .. finds any element with the css classname, in it's class property value
$("[HTML tag]") .. finds all elements with the HTML tag, ex: div

There are other ways to identify the specific tag or tag set that needs to be manipulated.  But for now, as a beginner, this will suffice.  IT's KISE - keep it simple and elegant =)

For more information on ways to find elements using JQuery, browse to:

Once you have found your element to manipulate, then the JQuery API kicks in.

To scroll to a specific spot in the DOM using JQuery I would write the following piece of code.

<script src="jquery.js" type="javascript">
<script src="scrollintoview.js" type="javascript">

<div id="showme" class=""></div>


Unfortuantely, for my example, you will need to also include the JQuery ScrollIntoView plugin.  It's not hard, just, a very good blog posts describes how the function works, why it was developed, and how to plug it into JQuery.

Oh, and one last note about JQuery that may through you at first.  Most JavaScript programmers that start out are used to basic coding practices.  JavaScript relies on Recursive and CallBack functions.

Recursive means the function calls itself N times, till it exits

callself : function  (n)
{ if n< 10) callself (n+1) }

A call back function is a function that is passed to another function in case you want to do something else before, during or after a process in the called function.  In PHP this call back function is used to manipulate list elements.

callback : function (key, value)
{ // do something here with the given input }

process : function (list, start, end, callback)
    var bThese = false;

    for (var key in list)
        bThese = ( (key == start) ? true : ( (key == end) ? false : bThese ) );

        if (bThese)
           if (callback)
            callback (key, list [key]);

I know this is TMI, hope that it helps steer you and future dwellers in the right direction.

Good luck,


On 10/9/2013 10:37 AM, wrote:
Hello Nathan:

I have a question related to the same issue. Your answer did point me in the right direction, thank you again.

I'm coding for a static HTML page which will be used for demos for sales people out in the field so they won't have
to rely on the internet.  My JavaScript function captures the data input from the user correctly I tested it, but the way the
real form that uses the internet behaves is when the user hits the register button the form goes back to a certain part
on the page(a tab) which is on the same page. When I do it that way on the static page using DOM  manipulation with JavaScript
 it wipes out everything. Do you have any suggestions as to how I can keep this information from being wiped out when I
go back to the tab where my Dom information would be.  Its written in stone this is the way they won't it to appear. I understand
that using the DOM nothing is actually written to the HTML page.

Thank You, any suggestion is greatly appreciated


On Tuesday, October 8, 2013 12:28:02 AM UTC-5, wrote:
I,m trying to write some code to create a a div with a class and and id. I believe I have that part correct, I then create a <p> element, I then create a text node to go inside the <p> tag the issue is trying to append everything. I need to work dynamically

This is what I'm trying to do
var element = document.getElementsByClassName("creditCardSummary");

var parent= element.parentNode;

//create div

var newDiv = document.createElement("div"); "newcc";
newDiv.className = "creditCardSummaryWrapper";

//Create a paragraph tag
var para = document.createElement("p");
var node=document.createTextNode("CardNumber:cshadow Experation:monthyear");

//The monthyear and cshadow are variables that hold information I
//captured from a form successfully.


I can't figure out out how to append all this so div ,<p >and text  to show up.

parent.insertAfter(element, para); //I know something is missing.

Your help is greatly appreciated, thanks in advance
You received this message because you are subscribed to the Google Groups "JavaScript Forum" group.
To unsubscribe from this group and stop receiving emails from it, send an email to
For more options, visit

No virus found in this message.
Checked by AVG -
Version: 2013.0.3408 / Virus Database: 3222/6736 - Release Date: 10/09/13


Post a Comment

Note: Only a member of this blog may post a comment.

Copyright © 2010 Web Design | Free Blogger Templates by Splashy Templates | Layout by Atomic Website Templates

Vida de bombeiro Recipes Informatica Humor Jokes Mensagens Curiosity Saude Video Games Animals Diario das Mensagens Eletronica Rei Jesus News Noticias da TV Artesanato Esportes Noticias Atuais Games Pets Career Religion Recreation Business Education Autos Academics Style Television Programming Motosport Humor News The Games Home Downs World News Internet Design Entertaimment Celebrities 1001 Games Doctor Pets Net Downs World Enter Jesus Mensagensr Android Rub Letras Dialogue cosmetics Genexus lasofia thebushrajr wingshock tripedes gorduravegetal dainfamia dejavu-transpersonal jsbenfica republicadasbadanas ruiherbon iranianforaryans eaystcheyl fotosdanadir Só Humor Curiosity Gifs Medical Female American Health Madeira Designer PPS Divertidas Estate Travel Estate Writing Computer Matilde Ocultos Matilde futebolcomnoticias girassol lettheworldturn topdigitalnet Bem amado enjohnny produceideas foodasticos cronicasdoimaginario downloadsdegraca compactandoletras newcuriosidades blogdoarmario arrozinhoii