搜 索

在js或JQuery中怎样判断页面html代码中含有指定名称的div元素

编辑:QTOOL.NET日期:2019-12-29421

在我们制作网页的过程中,想要在某个页面中的某一元素中添加新的内容,而不想改动那个页面,我们一般会直接在全局的jsz中直接加入document.getElementById("指定id")来给定指定元素新的内容,但在一些页面中没有指定id的div元素浏览器就会报错,影响后面的代码执行,

所以为了防止浏览器因为找不到指定名称的div元素而报错,我们需要在全局的js文件中判断哪些页面存在指定名称的元素再对其追加更丰富的内容.

示例:

<div id="qtool-abcde">这是元素1</div>

假设我们想要判断页面中是否存在id名称为qtool-abcde的div元素该怎样实现?

1、js实现方法:

<script type="text/javascript">

if(document.getElementById('qtool-abcde')) {    

   //找到元素

} else {    

    // 未找到元素执行的内容

}

</script>

2、使用jQuery插件实现则更为简单些:

在jquery插件中,存在的完善的代码处理机制,即使在网页中获取不到元素可能也不会报错,所以如果我们直接按照if($("#qtool-abcde")){}这样写来判断元素是否存在是错误的,会一直执行下去不管元素是否存在.因为$("#qtool-abcde")获取的是对象,不管页面中是否有这个元素

所以我们应该按以下代码来判断:

<script type="text/javascript">

if($("#qtool-abcde").length > 0) {    

   //找到元素

} else {    

    // 未找到元素则

}

</script>

引入jQuery插件后只需要判断元素的长度是否为0则能够得出指定名称的div元素是否存在,而且还可以像($("#qtool-abcde img").length这样来组合检测页面id为qtool-abcde的元素中是否存在图片标签等.

当我们想要在qtool-abcde元素中增加一段新的文本时可以这样:

<script type="text/javascript">

if($("#qtool-abcde").length > 0) {    

 $("#qtool-abcde").append("这是一段新的文字噢~~~.");

} else {    

}

</script>

在jq中可以很方便的使用append()、prepend() 、after()、before()方法分别来在被选择的元素结尾、开头、之后、之前的位置添加新的文字或元素.

TAG标签:js
此文章由QTOOL.NET编辑
最新文章

热门标签