一天，在从多个站点查看源代码时，我注意到大量元素不包含任何数据。 我开始徘徊，为什么网页设计师会在网页上放置元素而不显示任何内容。 然后我意识到那些空元素是简单的占位符。 设计人员以后将要处理的屏幕空白区域。
JavaScript提供的一项非常有用的功能是能够替换以前显示的现有HTML文档中元素的内容，甚至是空元素。 Web设计师可能选择利用此功能的原因很多，但提供交互式页面是一个可能的目标。
检索HTML表单数据中心在新页面上显示检索到的数据。 尽管该方法实际上显示了数据，但有时在将数据检索到的同一页面上显示数据可以增强站点的吸引力。
要实现此简单功能，需要使用另一种技术，该技术采用getElementByID（）内置JavaScript函数。 我是否提到JavaScript区分大小写？ 很好，因此在使用先前定义的函数时，请确保正确输入大写和小写字母，否则当JavaScript解释器无法找到函数时，您将收到语法错误。
getElementById函数
在JavaScript中， getElementById（）函数提供了替换以前包含在文档中并由id属性标识的元素中的数据的功能。 您将idattribute包含在HTML标记内。 例如，要包括id属性以将表单标识为contactForm，我们将在<form>标记中包括id属性，如下所示：
<form id="contactForm"> ... </form>
现在我们已经在HTML文档中确定了表单，现在可以在脚本中引用该表单了。
代码段中的以下行说明了使用包含getElementById（） JavaScript函数的一般形式或语法：
document.getElementById(elementId).innerHTML="new content";
在所示的代码行中，document是包含getElementById（）函数的当前文档或父文档。 括号中的elementId表示要修改的元素的ID 。 语句的innerHTML =“新内容”部分指示浏览器用引号之间的新内容表示的内容替换内部HTML区域或HTML元素标签之间的空间。 还请注意，语句中的句点。 这些标点符号是必需的，并将对象与要采取的方法和操作分开。
使用此功能还可以说明W3C HTML文档对象模型（DOM）中元素之间的关系。 尽管Internet不受特定组织的控制，但是W3C或World Wide Web联盟为Web开发制定了标准。
在DOM下，文档被视为网页中的父对象或最高级别的对象。 从面向对象编程（OOP）中借用对象的概念导致对象中包含属性和方法。 在本指南下， getElementById（）方法包含在文档类中，并且可以引用父文档的任何子元素，只要该元素包含id标识符即可，该方法用于定位目标元素。
因此，我们可以使用getElementById（）函数做什么呢？让我们首先通过在HTML代码的<body>部分中的第一个表之后创建另一个表来进行准备。 以下代码段创建了一个不显示任何内容的表。 原谅我不包含运行HTML代码时表格显示的屏幕截图，但是该显示类似于暴风雪中北极熊的照片-只是很多白色。
<table style="background-color:LightSkyBlue" border="1">
<tr>
<td id="ic1"></td><td id="ic2"></td>
</tr>
<tr>
<td id="ic3"></td><td id="ic4"></td>
</tr>
<tr>
<td id="ic5"></td><td id="ic6"></td>
</tr>
</table>
查看右侧的屏幕快照，将显示输入表单，其中添加了空白表单。 我为表单提供了蓝色背景，以便新表单的位置显示在屏幕快照中。 请注意表格的尺寸非常小（蓝色的小框）。
因此，添加第二张表后，我们现在可以使用getElementById（）方法添加代码以从表单中提取数据并在第二张表中显示该数据。 执行这些操作的代码如下：
<script type="text/javascript">
function commitData() { document.getElementById("ic1").innerHTML="First Name";
document.getElementById("ic2").innerHTML=document.contactForm.fname.value;
document.getElementById("ic3").innerHTML="Last Name";
document.getElementById("ic4").innerHTML=document.contactForm.lname.value;
document.getElementById("ic5").innerHTML="E-mail Address";
document.getElementById("ic6").innerHTML=document.contactForm.emAddress.value;
}
</script>
你学到了什么？
在该示例中，将上面的代码放在HTML文档的<head>部分中，并使用onclick事件（在后面的中心中的onclick事件中有更多信息）调用该函数。 当用户单击用于提供数据的表单中作为<input>元素提供的按钮时，将触发onclick事件。 这不是使用getElementById（）函数的唯一方法，而是作者在此示例中使用的方法。 尝试使用该功能，以真正了解该方法的多功能性。
快速说明：
您会注意到，在我的大多数代码示例中，代码都是使用缩进格式设置的。 这些缩进称为空白，对于人类查看者来说，只是提高了代码的可读性。
计算机不在乎空白，而是从程序的运行版本中解析出那部分代码。
但是，空格确实使调试代码更容易，并且在使用HTML代码时，空格使查找丢失的标签变得轻而易举。 使用其他语言时，此技术也很有帮助。
本文最初由DoMyWriting的Daisy Rowley 撰写
From: https://hackernoon.com/replacing-html-content-using-javascript-9a3d36c56cc
9378
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
