Javascript createElement与getElementById

我是一名编程专业的学生，正在上一堂基本的网页设计课。我必须编写一个基本的JavaScript函数，当鼠标悬停在链接上时，该函数将更改显示的照片。我写的函数运行得很好，我的作业得了A。但我的教授建议，为了获得额外的学分，我应该尝试重写我的代码，以便通过使用

document.createElement（“img”）

“以编程方式vs innerHTML”工作。我不知道该如何处理这件事。我使用

createElement

查找的所有内容似乎都不符合我编写函数的方式。任何帮助或指导都将受到感谢。下面是我当前代码的一些片段供参考。（HTML和JavaScript在不同的文件中。）

谢谢你能给我的建议

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>

What'；在附近吗


**等*

JavaScript

function switchPix(file, desc) {

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

}

功能开关PIX（文件，描述）{
document.getElementById（'pix'）。innerHTML=''；
}

---

这是我在这里提出的第一个问题，因此，如果我的措辞笨拙或没有遵守所有准则，我表示歉意。随着我对站点和编码的了解，我将尝试做得更好。

使用document.createElement（），您将创建另一个图像标记，如下所示：

// 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";

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

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

然后将此元素添加到“父”地物元素，如下所示：

// 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";

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

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

然后必须删除或隐藏现有的图像元素，如下所示：

// 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";

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

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

有更多的方法可以达到这个结果

只需在鼠标悬停时更改现有图像标记的“src”属性

在figure元素中放置两个图像标记。一次隐藏一个，一次显示另一个。发生鼠标悬停事件时，只需更改其style.display属性以显示其中一个图像标记，并隐藏另一个图像标记。

createElement使用javascript DOM API

这意味着您正在使用具有方法和属性的对象，而不是字符串串联

请记住，您使用document.createElement创建的每个HTML元素都应该添加到当前HTML文档的某个位置，以便在页面上可见

---

您可以在

的innerHTML中找到该引用，它用于添加一个字符串，该字符串可能具有类似的html标记，因此，与其使用它，不如使用appendChild方法。看看这个链接，我推荐使用replaceChild将您创建的img与文档中的img交换，但我不太确定您的教授在问什么。