if(typeof(HTMLElement)!="undefined" && !window.opera)
{
HTMLElement.prototype.__defineGetter__("outerHTML",function()
{
var a=this.attributes, str="<"+this.tagName, i=0;for(;i<a.length;i++)
if(a[i].specified)
str+=" "+a[i].name+'="'+a[i].value+'"';
if(!this.canHaveChildren)
return str+" />";
return str+">"+this.innerHTML+"</"+this.tagName+">";
});
HTMLElement.prototype.__defineSetter__("outerHTML",function(s)
{
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var df = r.createContextualFragment(s);
this.parentNode.replaceChild(df, this);
return s;
});
HTMLElement.prototype.__defineGetter__("canHaveChildren",function()
{
return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());
});
}
使用方法:
<div id="test">
<input type="text" name="text" />
<p>this is a sentence</p>
</div>
<script>
var out = document.getElementById("test").outerHTML;
</script>
分享到:
相关推荐
根据提供的文件信息,我们可以深入探讨三个重要的DOM属性:`innerHTML`、`innerText`以及`outerHTML`。这些属性在Web开发中非常关键,用于获取或设置元素内部的内容。接下来将详细解析这些属性的功能、用途及差异。 ...
.innerHTML、outerHTML、innerText、outerText是HTML文档对象模型(DOM)中四个常用的属性,它们都是用来操作HTML元素的内容的,但它们之间有着很大的区别。 .innerHTML .innerHTML是W3C标准属性,用于获取或设置...
为了获取或设置一个元素的outerHTML,我们可以使用`prop("outerHTML")`。下面是一些使用jQuery来操作outerHTML的实例。 ### jQuery 获取outerHTML 要获取一个元素的outerHTML,可以使用如下代码: ```javascript ...
另一种更加简洁且不涉及原型修改的方法是创建一个空的`div`元素,将目标元素克隆并插入到这个空`div`中,然后获取`div`的`innerHTML`,以此来模拟`outerHTML`: ```javascript function outerHtml(elem) { if ...
介绍 与仅返回元素HTML内容的$.html()不同, $.outerHTML()返回所选元素及其HTML内容,或将其... 如果该属性不可用,则使用浏览器的cloneNode或jQuery的克隆来克隆该元素,并将其附加到一个临时Node然后从那里获取inne
以下是一个使用 `outerHTML` 的示例: ```javascript let element = document.querySelector('div'); console.log(element.outerHTML); // 输出元素的完整HTML表示 element.outerHTML = ';">新内容</span>'; // ...
例如,`myDiv.outerHTML = "<span>New Content</span>"`将替换掉`<div>`为一个新的`<span>`元素。 - 示例:`document.getElementById("test_id3").outerHTML = "<i><u>设置或获取对象及其内容的 HTML 形式.</u></i>...
压缩包中的`ff_outerHTML.html`文件很可能包含了一个示例,演示了如何在Firefox中使用上述方法解决`outerHTML`问题。通过打开这个文件,我们可以看到具体的代码实现和使用场景,从而加深理解和应用。 总的来说,...
解决这个问题的一个方法是避免使用 `outerHTML` 来删除元素。我们可以改用 `removeChild` 方法,它能直接从DOM树中移除指定的子节点。例如: ```javascript var crtDIV = document.getElementById('divIDName'); if...
综上所述,了解和掌握如何获取一个元素的`outerHTML`是前端开发中的一项重要技能,特别是在需要精确复制页面元素结构时非常有用。通过上述方法可以有效地解决这类问题,但需要注意选择合适的方法以适应不同的开发...
// 输出: "<div id="testdiv"><p>这是一个示例</p><span>包含一些;">内联元素</span></span></div>" ``` - **innerText示例**: ```javascript console.log(div.innerText); // 输出: "这是一个示例包含一些内联...
以下是一个代码示例,通过JavaScript在Firefox中模拟`outerHTML`的行为: ```javascript // 获取 HTMLElement 的原型对象 var pro = window.HTMLElement.prototype; // 定义 getter,获取 outerHTML pro.__...
html js innerHTML outerHTML innerText outerText 等的区别及实例汇总
此方法不仅适用于开发者快速预览和调试页面结构,对于学习前端技术的新手而言也是一个非常实用的小技巧。 #### JavaScript与HTML源码 在Web开发中,HTML(HyperText Markup Language)是用于创建网页的标准标记...