outerHTML
1，获取html结构：当前节点下的代码：
jQuery.html() 是获取当前节点下的html代码，并不包含当前节点本身的代码；
2，jQuery.prop("outerHTML")：包含当前节点本身的代码：
console.log($("#a").prop("outerHTML"));
然而我们有时候的确需要，可以通过jQuery.prop("outerHTML")的方式设置。
3，innerHTML:
从对象的起始位置到终点位置的全部内容，不包括html标签；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="a">
<li>1</li>
<li>就放多了几分</li>
<li>登录</li>
</ul>
<ul id="b"></ul>
</body>
</html>
<script type="text/javascript">
var a = document.getElementById("a");
console.log(a.innerHTML);
</script>
4， outerHTML:
除了包含innerHTML的全部内容外，还包含对象标签本身。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="a">
<li>1</li>
<li>就放多了几分</li>
<li>登录</li>
</ul>
<ul id="b"></ul>
</body>
</html>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function () {
var a = $("#a li");
var text=[];
for(var i=0;i<a.length;i++){
//JavaScript 中大括号表示创建对象。
//var obj = {name:"jacky" };
//obj.name
var obj = {div:a[i].outerHTML};
text.push(obj);
}
var str = "";
$.each(text,function (i,v) {
str += v.div;
});
console.log(str);
$("#b").html(str);
})
</script>
outerHTML的更多相关文章
- 【JavaScript】innerHTML、innerText和outerHTML的用法区别
用法: <div id="test"> <span style="color:red">test1</span> tes ...
- innerHTML,outerHTML,innerText,outerText区别以及insertAdjacentHTML()方法
在需要给文档插入大量的新的HTML标记的情况下,通过多次DOM操作先创建节点再指定它们之间的关系会非常麻烦而且效率不高,相对而言插入标记的方法会更加简单,速度也更快. 插入标记中有这四个属性inner ...
- innerHTML、innerText、outerHTML、outerText的区别
我们在用JS/JQ 获取或设置元素内容的时候,通常是获取或设置指定元素之间的内容 <script> //JS document.getElementById('test').innerHT ...
- jquery获取所选元素的outerHTML
大家都知道原生js可以获取匹配元素的内部html和外部html,内部是innerHTML,外部是outerHTML,原生js的dom对象是存在这两个属性的. 如果用jQuery如何获取匹配元素(包括自 ...
- 【jQuery 使用】 利用jQuery.prop("outerHTML")获取包含自身在内的HTML元素的HTML代码
jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然而我们有时候的确需要,可以通过jQuery.prop("outerHTML")的方式设置. ...
- innerHTML和outerHTML有什么区别
一.区别:1)innerHTML: 从对象的起始位置到终止位置的全部内容,不包括Html标签.2)outerHTML: 除了包含innerHTML的全部内容外, 还包含对象标签本身. 二.例子1: & ...
- (转)innerHTML、innerText和outerHTML、outerText的区别
原文:http://walsh.iteye.com/blog/261966 innerHTML.innerText和outerHTML.outerText的区别 博客分类: CSS/ ...
- innerHTML/outerHTML; innerText/outerText; textContent
innerHTML v.s. outerHTML Element.innerHTML Reference: https://developer.mozilla.org/en-US/docs/Web/A ...
- javascript innerHTML、outerHTML、innerText、outerText的区别
1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内 ...
随机推荐
- javascript中怎么判断对象{}为空
有时候通过AJAX方法调用返回的是一个JSON对象,而这个对象可能在开发过程中会没有数据是一个空{}. JavaScript判断object/json 是否为空,可以使用jQuery的isEmptyO ...
- Python学习笔记——列表
1.创建列表类型数据并给其赋值 >>> aList = [123,'abc',4.56,['inner','list'],7-9j] >>> aList [123, ...
- @RequestMapping 用法详解之地址映射(转)
引言: 前段时间项目中用到了RESTful模式来开发程序,但是当用POST.PUT模式提交数据时,发现服务器端接受不到提交的数据(服务器端参数绑定没有加任何注解),查看了提交方式为applicatio ...
- ueditor 百度编辑器，取消或自定义右键菜单
如图:有2种自定义方法,一种是改源码,一种是初始化 初始化,如下代码: var ue = UE.getEditor('XXXid',{ // contextMenu:[ {label:'', cmdN ...
- Atom编辑器的插件
先说下atom的插件安装方法吧,因为没用过苹果电脑,所以这里就只说下windows的操作吧. " ctrl+, "调出设置面板 点击install按钮,进去搜索插件面板 1.exp ...
- 深入理解IoC/DI
------------------------------------------------------------------------ 理解IoC/DI 1.控制反转 --> 谁控制谁 ...
- CSS3 时钟
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【转~】初识贝塞尔曲线（Bézier curve）
本文图文大多转自http://www.html-js.com/article/1628 QAQ我居然去扒维基,,,看不懂啊,,,我要去补数学,,, 在做变形小鸡的时候用到CSS3 transition ...
- JS 做的鼠标放大镜（初级）
这今天我们学习鼠标的各种事件,我给大家分享一下鼠标放大镜的效果. 希望有兴趣的朋友可以一块交流. <!DOCTYPE html><html> <head> < ...
- JS中的call()和apply()方法
1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...