父节点获取子节点的字符串示例代码

1、JavaScript方法：document.getElementById("id").innerHTML;

（1）实例说明


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取HTML中的子项</title>
<script type="text/javascript">
function getStr()
{
var str = document.getElementById("div_child").innerHTML;
alert(str);
}
</script>
</head>

<body>
<div id="div_child">
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<input type="button" id="btn" onclick="getStr()" value="获取字符串"/>
</div>
</body>
</html>

（2）点击按钮后，弹出信息
 
2、jQuery中的方法：$("#id").html()

（1）实例说明


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery中父节点获取子节点字符串</title>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var str = $("#div_child").html();
alert(str);
});
});
</script>
</head>

<body>
<div id="div_child">
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<input type="button" id="btn" value="获取值"/>
</div>
</body>
</html>

（2）运行结果

赞 (0)

相关推荐

  • 父节点获取子节点的字符串示例代码

    父节点获取子节点的字符串示例代码

    1.JavaScript方法:document.getElementById("id").innerHTML; (1)实例说明 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="h

  • jquery获取子节点和父节点的示例代码

    一.获取子节点 比如是一个 id 为 test 的 div元素,我们这样选中,$('#test'),我们要查找这个div下的一个class为demo的span元素,有一下几种方法 1.使用筛选条件 $('#test span.demo') 2.使用find()函数 $('#test').find('span.demo') 3.使用children()函数 $('#test').children('span.demo') 二.获取父节点 jquery获取父元素方法比较多,比如parent(),pa

  • javascript获取网页中指定节点的父节点、子节点的方法小结

    我们在实际的开发当中经常要获取页面中某个html元素,动态的更新该元素的样式.内容属性等. 那么如何获取要更新的这些元素呢?用JavaScript获取这些节点的方法有很多种,下面是总结的一些方法. 1. 通过document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同id的节点,那么只返回第一个节点. 如 今,已经出现了如prototype.Mootools等多

  • JS获取子节点、父节点和兄弟节点的方法实例总结

    本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 1. 通过获取dom方式直接获取子节点 其中test的父标签id的值,div为标签的名字.getElementsByTagName是一个方法.返回的是一个数组.在访问的时候要按数组的形式访问. var a = document.getElementById("test").getElementsByTagName("div"); 2. 通过childNo

  • jquery的父、子、兄弟节点查找,节点的子节点循环方法

    jQuery.parent(expr)           //找父元素 jQuery.parents(expr)          //找到所有祖先元素,不限于父元素 jQuery.children(expr)        //查找所有子元素,只会找到直接的孩子节点,不会返回所有子孙 jQuery.contents()            //查找下面的所有内容,包括节点和文本. jQuery.prev()                //查找上一个兄弟节点,不是所有的兄弟节点 jQue

  • Java list如何根据id获取子节点

    工作中因业务需求,将数据库中的树状结构的数据根据父节点获取所有的子节点 实现思路 1.获取整个数据的list集合数据 2.将数据分组,java8 list有groupby分组,java8之前的自己遍历整理 3.分组后递归获取子节点,有子节点的添加,没有的设置子节点并删除分组的数据,知道分组数据删完 Tree.java @Data public class Tree { private Integer id; private Integer pId; private String key; pri

  • vue实现父组件获取子组件的方法或属性值详解

    目录 父组件获取子组件方法或属性值 这里主要使用了vue的$ref 父组件获取子组件中的变量 案例一:点击父组件的按钮,操作子组件显示 案列二:获取子组件data中的变量 父组件获取子组件方法或属性值 vue的本质就是每一块只负责自己这一块的工作,这样更容易维护. 这里主要使用了vue的$ref 当用在一般的标签上时,主要功能是获取dom节点,进行一些dom的操作. 当使用在子组件上,可以用来获取子组件的属性. 那么下面我们要实现的就是如何在父组件上使用子组件的方法 目标:我需要实现一个在父组件

  • Vee-validate 父组件获取子组件表单校验结果的实例代码

    vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开箱即用,还支持自定义正则表达式.而且支持 40 多种语言,对本地化.多语言支持非常友好. 国内饿了么团队开源项目 Element UI 就用到了 vee-validate. vee-validate官网:https://baianat.github.io/vee-validate/ 使用方法 可查看

  • mybatis中insert主键ID获取和多参数传递的示例代码

    一.插入数据主键ID获取 一般我们在做业务开发时,经常会遇到插入一条数据并使用到插入数据的ID情况.如果先插入在查询的话需要多一次sql查询,未免效率太低.因此mybatis也有提供插入数据并返回主键ID的方式.如下 1.Insert/update 1.1.属性解释 keyProperty selectKey 语句结果应该被设置的目标属性.如果希望得到多个生成的列,也可以是逗号分隔的属性名称列表. resultType 结果的类型.MyBatis 通常可以推算出来,但是为了更加确定写上也不会有什

  • c++如何分割字符串示例代码

    c++如何分割字符串示例代码

    话不多说,直接上代码 如果需要根据单一字符分割单词,直接用getline读取就好了,很简单 #include <iostream> #include <vector> #include <string> #include <sstream> using namespace std; int main() { string words; vector<string> results; getline(cin, words); istringstre

随机推荐