append 和appendTo ，appendChild，insertBefore实例

最新推荐文章于 2024-07-28 20:27:10 发布
最新推荐文章于 2024-07-28 20:27:10 发布
阅读量287 收藏
点赞数
文章标签： javascript 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

  <style type="text/css">
  body {
	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
	font-size: 62.5%;
}
</style>
  <script>
  $(function() {
  //$(selector).append(content,function(index,html))
 // append     //jQuery
 // appendTo    //jQuery
 // appendChild   //DOM
  //node.insertBefore(newnode,existingnode)   //DOM  
	//$(content).insertBefore(selector)// //jQuery
	//$(content).prependTo(selector)//jQuery

   debugger
	$("button").append(" <b>ooo</b>");//jQuery
	$("button").append("ooo");//jQuery
	//prependTo() 方法在被选元素的开头插入 HTML 元素。
	$("<span>1w</span>").appendTo("button");//jQuery
	var chl	=$("[name=divame]").children().last().children().first();
	$("<li>cccuuu</li>").insertBefore(chl);//jQuery

	
	var nodechild=document.getElementById("w1").lastChild;
	var node2 =document.getElementById("w2");
	node2.appendChild(nodechild);//DOM
	node2.insertBefore(nodechild,node2.firstChild);//DOM
	var kl = document.createElement("li");
	$(kl).append("ofijio");
	node2.insertBefore(kl,node2.firstChild);
	$("<li>liushahe</li>").insertBefore($(node2.firstChild));///
	
	var node=document.getElementById("myList2").lastChild;
	var list=document.getElementById("myList1");
	list.insertBefore(node,list.childNodes[0]);

		var txt1="<p>Text.</p>";              // Create text with HTML
		var txt2=$("<p></p>").text("Text.");  // Create text with jQuery
		var txt3=document.createElement("p");
		txt3.innerHTML="Text.";               // Create text with DOM
		$("body").append(txt1,txt2,txt3);        // Append new elements
	
	
	po=document.createElement("LI");
    $(po).append("kuuu");
    node2.appendChild(po);//po : <li>kuuu</li>
  });
function mydetails()
{
var x = document.createElement("DETAILS");
var t = document.createTextNode("Some additional details...");
x.appendChild(t);
document.body.appendChild(x);


}
  function mydivtwi()
	{
	var node=document.getElementById("myList2").lastChild;
	document.getElementById("myList1").appendChild(node);
	}
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 <p>Date: <input type="text" id="date"></p>
 <div><button> 确定</button></div>

<div name="divame">

<ul id="w1"><li>huang</li><li>shan</li></ul>
<ul id="w2"><li>zhu</li><li>hai</li></ul>
</div>
<div name="divtwi">
<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul>
<button οnclick="mydivtwi()">亲自试一试</button>

</div>
<h3>演示如何访问 DETAILS 元素</h3>

<p>点击按钮来创建 DETAILS 元素。</p>

<button οnclick="mydetails()">试一下</button>

</body>
</html>

njcgosling
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
append和appendTo的区别以及appendChild用法
09-04
在JavaScript和jQuery中，操作DOM元素的添加是一个常见的任务，其中`append`、`appendTo`和`appendChild`是三个关键的函数。理解它们的区别和用法对于进行前端开发至关重要。 首先，`append`和`appendTo`都用于在...
jquery append与appendTo方法比较
10-19
在jQuery库中，`append`和`appendTo`都是用于在DOM元素中添加内容的方法，但它们的使用方式和效果略有不同。理解这两个方法的区别对于优化jQuery代码和提高开发效率至关重要。 1. `append()`方法： `append()`方法...
jQuery（六）-节点操作 :children()、 find()、appendTo、prepend、after、before、insertAfter、insertBefore、wrap...
小白小白从不日别的博客
05-05 2004
三、节点的相关操作
JQuery之append和appendTo的区别，还有js中的appendChild用法
07-16 4万+
JQuery之append和appendTo的区别 append()前面是要选择的对象，后面是要在对象内插入的元素内容  appendTo()前面是要插入的元素内容且为Jquery对象，而后面是要选择的对象  实例：  $('#a').append('content');  $('content').appendTo($('#a'));  注意appendTo前面一定要是J
JavaScript——节点Node和元素操作（JS和jQuery对比）
Mr.ShyZhang趟过的前端“小路坑”
05-26 1447
节点Node    DOM由节点组成    节点类型（12种）        元素类型 1        文本类型 3        注释类型 8        文档类型 9    节点和元素的关系：        每个元素一定是节点 节点不一定是元素 元素只是节点的一种    获取节点类型 nodeType        用法：node.nodeType        返回值：数字代表的节...
一些方法：JQ: append() 、appendTo() || JS：appendChild()：
The limits of your knowledge are the limits of your world
03-19 3606
JQ .append() 方法 实例 在每个 p 元素结尾插入内容： $("button").click(function(){ $("p").append(" <b>Hello world!</b>"); }); 定义和用法 append() 方法在被选元素的结尾（仍然在内部）插入指定内容。 提示：append() 和 appendTo() 方法执行的任务相同。不同...
append和appendTo的区别以及js中的appendChild用法
凌凌小博客
01-26 6887
append和appendTo的区别以及js中的appendChild用法 很多像我一样接触JS没多久的小白对append和appendTo的区别以及js中的appendChild用法都会有所模糊，下面对这个进行详细区分： append和appendTo的区别： append()前面是要选择的对象，后面是要在对象内插入的元素内容  appendTo()前面是要插入的元素内容且为
jQuery中append、insertBefore、after与insertAfter方法注意事项
10-28
jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项
appendChild和insertBefore ,append和appendTo
njcgosling的博客
07-21 409
首先 从定义来理解 这两个方法： appendChild() 方法：可向节点的子节点列表的末尾添加新的子节点。语法：appendChild(newchild) insertBefore() 方法：可在已有的子节点前插入一个新的子节点。语法 ：insertBefore(newchild,refchild) 相同之处：插入子节点 不同之处：实现原理方法不同。 　　　　　a
JavaScript中的appendChild（）方法
热门推荐
每天学习一点点
12-01 8万+
1.appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。 实例一： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;/head&gt; &lt
利用insertBefore方法和appendChild方法实现一个insertAfter函数
cccccl的博客
03-23 2560
我们知道DOM API中有inserBefore和appendChild方法，但是好像并没有insertAfter方法（将一个结点插入另一个节点的后面）。其实也insertAfter也不是很有必要，我们也可以利用inserBefore和appendChild自己写一个insertAfter函数。 一、insertBefore的用法： 该Node.insertBefore()方法在参考节点之前插入一个节点，作为指定父节点的子节点。 let insertedNode = parentNode.insertBef
appendChild append insertBefore prepend
weixin_34007291的博客
11-02 128
  CreateTime--2017年11月2日16:57:59 Author:Marydon appendChild()与append() insertBefore()与prepend()区别与联系 描述： 　　1.appendChild()是javascript在父节点最后面插入子节点的方法； 　　2.append()是jquery在父节点最后面插入子节点的方法； 　　3.i...
append、appendTo、appendChild、prepend
章柏华的博客
12-21 7794
参考资料：http://blog.csdn.net/xiangxiangw29/article/details/52460563 append、appendTo、appendChild、在父节点中的最后一个子节点后面插入。append和appendTo区别是append的前面是对象，后面是要插入的节点对象。 比如append     var wrap=document.getElementBy
【React 】开发环境搭建详细指南
lph159的博客
07-24 1213
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 359
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
VUE中的重点*
qq_61132537的博客
07-22 1077
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 181
【代码】vue el-select的下拉树形结构。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 222
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
新手vue学习问题汇总（自用）（长期更新）
最新发布
lapiii的博客
07-28 265
是 ES6 模块语法，用于导出模块的默认成员。在 Vue.js 中，通常用来导出一个组件对象，使其可以在其他文件中被导入并使用。
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 622
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值