JavaScript实战：利用innerHTML控制元素内容与confirm确认框交互

JavaScript动态控制元素内容与确认交互实现

在开发过程中，有时需要动态控制特定层（Layer）或容器内的信息显示内容。通过查阅相关资料发现，可以使用innerHTML属性来修改指定元素的内部HTML内容。该属性的作用类似于表单元素中的value属性，主要用于更新元素内部的显示文本或HTML结构。

例如，当某个div容器初始为空或包含默认内容时，可以通过触发特定事件来动态插入内容，此时即可使用innerHTML属性。虽然理论上innerHTML可以修改窗口文档中几乎所有元素的内容，但实际应用中通常针对特定容器进行控制，具体适用范围需根据实际DOM结构测试确定。

利用innerHTML控制div与span元素显示

（1）对div标签的控制

div标签与span标签在显示行为上存在显著差异：div默认作为块级元素独占一行，而span作为行内元素与周围内容同行显示。通过后续代码演示可以直观看到两者在布局上的区别。首先分析针对div元素进行内容控制的实现方式。

<script language="javascript"> function chageDiv(number) { if (number == 1) { document.getElementById("div1").innerHTML = "值为1"; } if (number == 2) { document.getElementById("div1").innerHTML = "值为2"; } } </script>

DIV块测试：<div id="div1">默认值</div>

<a href="#" onClick="chageDiv(1)">改变值为1</a> <a href="#" onClick="chageDiv(2)">改变值为2</a>

运行上述代码时，点击“改变值为1”链接，原本显示的“默认值”将被替换为“值为1”。需要注意的是界面布局表现：由于div是块级元素，“DIV测试：”文本与“默认值”内容会分行显示，这体现了块级元素独占一行的特性。

（2）对span的控制

span元素的操作方式与div类似，但其作为行内元素的显示特性不同。具体实现代码如下：

function chageSpan(number) { if (number == 1) { document.getElementById("span1").innerHTML = "值为1"; } if (number == 2) { document.getElementById("span1").innerHTML = "值为2"; } } </script> Span行测试： <span id="span1">默认值</span><br> <a href="#" onClick="chageSpan(1)">改变值为1</a> <a href="#" onClick="chageSpan(2)">改变值为2</a>

当点击“改变值为1”链接时，“默认值”会更新为“值为1”。与div不同，由于span是行内元素，“Span行测试”文字与更新后的内容会保持在同一行显示，这直观展示了行内元素与块级元素在布局上的区别。

此外需要特别注意，无论是div还是span元素，在JavaScript中获取这些元素时都是通过id属性进行定位，而不是像表单元素那样依赖name属性。因此，确保HTML标签中正确设置了id属性是使用getElementById方法的前提。

使用confirm函数实现操作确认提示

（3）confirm确认提示框的制作

在执行可能产生副作用的操作（如删除数据）时，通常需要提供用户确认机制以避免误操作。JavaScript提供了confirm()函数来实现这一功能：该函数接收一个参数作为提示框中显示的信息，弹出对话框后，若用户点击“确定”，函数返回true；若点击“取消”，则返回false。基于这一返回值特性，可以采用两种不同的方式控制后续操作的执行。

看代码：

<script language="javascript"> function accessNeteasy() { if(confirm('你真的要访问网易新闻 ?')) { location='http://calendar.eyou.eyou'; } } function accessSina() { if (confirm('你确定要访问新浪新闻 ?')) { return true; } else { return false; } } </script>

访问方式一： <a href="#" onClick="accessNeteasy()">网易新闻</a><br> 访问方式二： <a href="http://news.sina.com.cn" onClick="return accessSina()">新浪新闻</a>

上述代码定义了两个函数：accessNeteasy和accessSina，分别用于访问网易和新浪新闻。第一种方式在点击链接后，通过confirm判断返回值，若为true则直接修改location属性跳转到指定URL。这种方式较为局限，通常仅适用于特定链接的直接跳转。第二种方式则通过函数返回值控制：若用户确认则返回true，否则返回false。在HTML链接中通过return语句接收该返回值，这种方式更具通用性，可以封装为通用的确认提示逻辑，便于在页面中多处复用。

以上代码示例均已通过测试验证，开发者可在此基础上根据实际需求进行扩展，编写符合特定业务逻辑的JavaScript代码。

更多前端开发技巧建议参考蓝色理想的相关技术文章：http://www.blueidea.com/tech/web/2004/2379.asp