`
tianmingqi
  • 浏览: 118764 次
  • 性别: Icon_minigender_1
  • 来自: 河南郑州
社区版块
存档分类
最新评论

Prototype系列之二：替换元素的内容

prototypeJavaScriptHTML 
阅读更多

replace('new') 可以替换内容，如果没有参数提供，那么replace只是清除element的内容。当然，用remove会比它更加快速也更加标准。

实例如下：

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script language="javascript" type="text/javascript"  src="javascripts/prototype.js"></script>
</head>
<body>
	<button onclick="$('first').replace('<strong>你好</strong>');">
		点我一下看！
	</button>
	<div id="food">
  		<div id="fruits">
    		<p id="first">hello</p>
  		</div>
	</div>
</body>
</html>

 

运行如下：

也可以使用如下代码实现：

<button onclick="$('first').innerHTML='<b>你好</b>';">
		点我一下看！
	</button>
	<div id="food">
  		<div id="fruits">
    		<p id="first">hello</p>
  		</div>
	</div>

 
 

  • 大小: 3.8 KB
分享到：
| Prototype系列之一：Prototype如何操作DO ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    prototype中文帮助文档

    - `Element.update()`：替换元素内部内容。 - `Element.insert()`：在元素内部插入其他内容。 四、Ajax Prototype.js的Ajax模块简化了与服务器的交互，主要包含： - `Ajax.Request`：用于发送HTTP请求，支持GET和...

    prototype1.6 API

    - `Element.update()`: 更新元素的内容，替换其现有的HTML。 3. **事件处理** - `Event.observe()`: 为元素添加事件监听器。 - `Event.stopObserving()`: 移除已添加的事件监听器。 - `Event.stop()`: 在事件...

    prototype1.7.zip

    例如，`Element.update()`方法现在能更高效地替换元素内容，`$$`选择器也经过了优化以提升选择速度。 五、兼容性与社区支持 Prototype 1.7对各种浏览器，包括IE6及更高版本，Firefox，Safari，Chrome和Opera，都...

    prototype-AJAX案例

    2. **Ajax.Updater**: 用于替换或更新DOM元素的内容。它基于Ajax.Request，但会自动处理响应并将结果插入到指定的DOM元素中。 ```javascript new Ajax.Updater('targetElementId', 'url', { method: 'get' || '...

    prototype.js开发手册.pdf

    1.1. `$()`是Prototype最著名的函数之一，用于选取DOM元素。它不仅支持ID选取，还能处理多个ID，返回一个元素数组。例如在test1()和test2()函数中，`$('myDiv')`选取ID为'myDiv'的元素，并在`test2()`中选取多个元素...

    Prototype Tab图片滚动组件

    在该组件中，它可能会利用Prototype的`$`函数来获取元素，`Element.extend`来扩展DOM元素的方法，以及`Element.update`来更新元素内容，包括替换或添加图片。 2. **事件处理**：Prototype提供了丰富的事件处理机制...

    使用prototype简化Ajax操作

    这里，`'targetElementId'`是目标元素的ID，服务器返回的内容会替换或插入到这个元素中。 此外，Prototype的Ajax.Form类允许你轻松地将表单数据发送到服务器。只需指定表单元素ID和一些选项，Prototype会自动处理...

    prototype-1.4.0

    `Element` 对象包含了一系列操作DOM的方法，如 `Element.update` 更新元素内容，`Element.hide` 和 `Element.show` 隐藏或显示元素，这些简化了DOM操作，提高了开发效率。 3. **事件处理**： Prototype 引入了事件...

    prototype1.5中文说明

    1. **DOM操作**：Prototype 提供了一系列方法，如`$`、`$$`和`Element`对象，用于查找、创建和操作DOM元素。`$`函数可以用来获取单个元素，而`$$`则返回一个元素数组，通常用于选择器查询，类似于CSS选择器。 2. **...

    API大全，整合html5,css,js,dom,php,prototype api等

    标题中的“API大全”指的是应用程序接口（Application Programming Interface）的集合，这通常是一系列预先定义的函数、类或方法，开发者可以使用它们来构建软件应用。这个资源集合了多个编程语言和技术领域的API，...

    Prototype开发笔记.doc

    - **Ajax.Updater**：在页面的某个区域更新内容，它是基于Ajax.Request的，可以直接替换或插入服务器返回的数据到指定的DOM元素。 2. **Prototype.js参考** Prototype对JavaScript的内置类型进行了扩展，包括： ...

    prototype.js.cn.doc.rar

    3. **Element对象**：Prototype.js强化了DOM元素的操作，如`Element.hide()`、`Element.show()`控制元素的显示隐藏，`Element.update()`用于替换元素内容。 三、Prototype.js实战应用 1. **模块化开发**：...

    Ajax的框架之一prototype简单用法

    `Ajax.Updater`则是更新页面某部分的工具，它会在请求完成后替换或插入指定元素的内容。 5. **事件处理**： Prototype提供了事件处理的统一接口，可以使用`Event.observe()`和`Event.stopObserving()`来监听和移除...

    Prototype使用指南之dom.js

    在JavaScript的世界里，Prototype库提供了一系列强大的DOM操作方法，极大地简化了对HTML元素的处理。在"Prototype使用指南之dom.js"中，我们主要探讨以下几个关键知识点： 1. **$方法**：这是Prototype中最核心的...

    prototype 1.6中文API

    Prototype是JavaScript库的一个重要版本，它为JavaScript编程提供了一系列实用的功能和工具，使得开发者能够更加高效地编写代码。本文将详细介绍Prototype 1.6中文API的相关知识点，包括其核心概念、主要功能以及...

    Prototype-2.pdf

    例如，`$("some-id").update("some-html")`将会把ID为`some-id`的元素的内容替换为`"some-html"`。 - **`hide()`**：用于隐藏指定的DOM元素。例如，`$("some-id").hide()`会隐藏ID为`some-id`的元素。 ### Array...

    prototype1.6手册

    Prototype 的 `Event.delegate` 方法支持事件委托，允许在一个父元素上监听子元素的事件，提高性能。 九、Ajax 表单 `Form.Element` 和 `Form.Methods` 提供了方便的表单元素操作和表单提交的 Ajax 化。 总结，...

    Prototype-v1.6.0使用手册

    它提供了一系列便捷的方法，如`$(selector)`用于选择元素，`$$(selector)`用于选择多个元素，以及`Element.Methods`系列方法，如`hide()`, `show()`, `toggle()`来控制元素的可见性。此外，还可以使用`Element....

    prototype一个简单的ajax例子

    4. **Ajax.Request.Methods**：Prototype提供了一系列的便捷方法，如`get`, `post`, `delete`, `put`等，它们是对Ajax.Request的简写，方便快速发起不同类型的HTTP请求。 5. **Transport对象**：Prototype内部使用...

    Developer Notes for prototype.doc

    Prototype 提供了对字符串的扩展功能，允许你使用模板字符串进行变量替换。 **示例代码**: ```javascript var name = 'World'; var message = 'Hello, ${name}!'; console.log(message.evalTemplate()); ``` #####...

Magicbox
Global site tag (gtag.js) - Google Analytics