js获取id后添加html代码,js获取Id的方法getElementById与$的由来和用Id判断元素是否存在及批量动态获取 Id...

要用js操作一个html元素必须获取到这个元素，而获取元素要用 getElementById() 方法，这个方法是通过元素的Id获取到元素这个对象。getElementById 字符比较多，写得比较长，所以现在常常又用$()来获取html元素对象，这又是怎么回事？

其实$()本质还是通过getElementById()方法获取到html元素对象，只不过把这个获取方法定义为简单的$，这样书写简短快捷方便。取到元素 id 后，可通过它取元素的值和文本；还能用它判断元素是否存在。除一次获取一个元素 id 外，还能一次动态获取多个 id。

一、js获取Id的方法getElementById的使用方法

假如有 div 元素如下：

用javascript获取Id的方法getElementById()的使用方法

var obj = document.getElementById("divId");

以上是通过div的id号divId获取div这个对象，然后就可以对div进行各种操作了，如删除其内容，设置其属性，将其隐藏等等。

值得注意的是：div 必须先于 javascript 代码加载，也就是 div 要放在 var obj = document.getElementById("divId") 的前面，否则因找不到对象而报错。

二、js通过$获取html元素的Id

首先需要定义$：

var $ = function (objId) { return ("string" == typeof (objId)) ? document.getElementById(objId) : objId; };

其实是把 $ 定义为一个函数(方法)，在这个函数中仍然是通过 getElementById 方法获取元素的这个对象；也就是 $ 本身并不具备获取元素对象的功能，它只是一个字符，不过是把它定义为了一个获取元素对象的方法。

获取上述的div元素通过$表示为：

var obj = $("divId");

用getElementById方法获取要写一长串字母，现在只需写一个字符，是不是方便快捷很多，尤其要获取很多元素对象的时候，优势更明显。

三、js 通过元素 Id 获取其值

假如要添加产品，这里以添加产品名称为例。首先要写 html 代码，然后再写 Javascript 代码，它们分别如下：

Html 代码：

产品名称：

Javascript 代码:

function AddProduct() {

var proName = document.getElementById("inProName");

alert(proName.value);

}

提示：这里的 Javascript 代码可以放到 Html 代码前，因为加载网页时不执行 Javascript 代码，单击按钮时才执行。

四、js 通过元素 Id 获取其文本

假如要分别取 div 和 span 的文本，它们的代码分别如下：

Html 代码：

javascript 通过 div 的 id 获取其文本