php dom怎么创建节点,怎么用DOM创建a节点?

95205bdb8271d1d18c8dc99624e60ad0.png

慕尼黑的夜晚无繁华

用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点,然后可以用attr()方法来获取元素的各种属性的值。但真正的DOM操作并非这么简单。在DOM操作中,常常需要动态创建HTML内容,使文档在浏览器里的呈现效果发生变化,并且达到各种各样的人机交互的目的。HTML DOM结构如下:

欢迎访问脚本之家

  • 简单易懂的PHP编程
  • 简单易懂的JavaScript编程
  • 简单易懂的JQuery编程
创建元素节点例如要创建两个元素节点,并且要把它们作为
  • 元素节点的子节点添加到DOM节点树上。完成这个任务需要两个步骤。1. 创建两个
  • 新元素。2. 将这两个新元素插入文档中。第1个步骤可以使用jQuery的工厂函数$()来完成,格式如下:$(html);$(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象后返回。首先创建两个
  • 元素,jQuery代码如下:var $li_1 = $("
  • "); // 创建第一个
  • 元素 var $li_2 = $("
  • "); // 创建第二个
  • 元素然后将这两个新元素插入文档中,可以使用jQuery中的append()等方法。JQuery代码如下:var $parent = $(".nm_ul"); // 获取
    • 节点。
    • 的父节点 $parent.append($li_1); // 添加到
      • 节点中,使之能在网页中显示 $parent.append($li_2); // 可以采取链式写法:$parent.append($li_1).append($li_2);动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入文档中。当创建单个元素时,要注意闭合标签和使用标准的XHTML格式。例如创建一个

      元素,可以用$("

      ")或者大写的$("

    • 元素节点并把它们插入文档中了。此时需要为创建的元素节点添加文本内容。JQuery代码如下:var $li_1 = $("
    • 新增节点:数据结构"); // 创建第一个
    • 元素 var $li_2 = $("
    • 新增节点:设计模式"); // 创建第二个
    • 元素 var $parent = $(".nm_ul"); // 获取
      • 节点。
      • 的父节点 $parent.append($li_1); // 添加到
        • 节点中,使之能在网页中显示 $parent.append($li_2); // 可以采取链式写法:$parent.append($li_1).append($li_2);如以上代码所示,创建文本节点就是在创建元素节点时直接把文本内容写出来,然后使用append()等方法将它们添加到文档中就可以了。无论$(html)中的HTML代码多么复杂,都要使用相同的方式来创建。例如$("
        • 这是一个复杂的组合");创建属性节点创建属性节点与创建文本节点类似,也是直接在创建元素节点时一起创建。JQuery代码如下:var $li_1 = $("
        • 新增节点:数据结构"); // 创建第一个
        • 元素 var $li_2 = $("
        • 新增节点:设计模式"); // 创建第二个
        • 元素 var $parent = $(".nm_ul"); // 获取
          • 节点。
          • 的父节点 $parent.append($li_1); // 添加到
            • 节点中,使之能在网页中显示 $parent.append($li_2); // 可以采取链式写法:$parent.append($li_1).append($li_2);通过浏览器查看源代码工具查看代码,可以看到最后两个
            • 元素多了名为“title”的属性节点。由此可以判断,创建的元素的文本节点和属性节点都已经添加到网页中了。由此可见用jQuery来动态创建HTML元素是非常简单、方便和灵活的。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值