CODEWITHSUNDEEP
javascripthtml
Joshua Ferrell
Joshua Ferrell

Reputation: 15

createElement vs getElementById

I am a programming student taking a basic web design class. I had to write a basic JavaScript function that would change the photo being displayed when a mouse would hover over a link. The function that I wrote works perfectly and I got an A on the assignment. But my professor suggested, for extra credit, that I should try to rewrite my code so that it would work "programmatically vs innerHTML" by using document.createElement("img"). I'm at a loss as to how to proceed with this. Everything I look up for using createElement doesn't seem to fit with how I wrote my function. Any help or guidance would be apprciated. Below are some snippets of my current code for reference. (The HTML and JavaScript are in separate files.)

Thanks for any advice that you can give!

HTML

    <h2 id="main">What&#39;s Nearby</h2>

    <figure id="pix" class="right">

      <img src="images/cablecar.jpg" width="480" height="270" alt="cable car turnaround" id="gallery" />

    </figure>

    <ul>

      <li><a href="http://www.asianart.org/" onmouseover="switchPix('asian', 'Asian Art Museum')" onfocus="switchPix('asian', 'Asian Art Museum')">Asian Art Museum</a></li>

    **etc.** 

    </ul>

  </article>

JavaScript

function switchPix(file, desc) {

  document.getElementById('pix').innerHTML = '<img src=\"images/' + file + '.jpg\" width = \"480\" height = \"270\" alt=\"' + desc + '\" />';

}

This is my first question that I have asked here, so I apologize if my wording is awkward or if I do not follow all of the guidelines. I will attempt to do better as I learn more about the site and about coding.

Upvotes: 1

Views: 420

Answers (2)

Mario Santini
Mario Santini

Reputation: 3003

The createElement use the javascript DOM API.

This mean that you are using objects with methods and attributes instead of strings concatenation.

Keep in mind that each HTML element you create with document.createElement should be added to the current HTML document in some place, to be visible on page.

You could find the reference on Mozilla development

Upvotes: -1

nvkrj
nvkrj

Reputation: 1033

With document.createElement(), you would create another image tag like this:

// Create the element
var imgElem = document.createElement('img');

// Assign the image path to it's src attribute
imgElem.src = "path\to\image";

// Assign width
imgElem.width = 480px;

// Assign height
imgElem.height = 270px;

// Assign alt
imgElem.alt = "something";

Then you would add this element to the "parent" figure element like this:

document.getElementById('pix').appendChild(imgElem);

Then you would have to remove or hide the existing image element like this:

document.getElementById('pix').getElementsByTagName('img')[0].style.display = 'none';

There are more ways you can achieve the result.

  1. Just change the "src" attribute of the existing image tag on mouse-over.
  2. Put both image tags in the figure element. Hide one and show another at a time. When the mouse over event occurs, just change their style.display attributes to show one and hide the other image tag. ..

Upvotes: 2

Related Questions