在Javascript中获取包含父级的容器内容

Get content of the container including parent in Javascript

本文关键字：包含父 Javascript 获取      更新时间：2024-01-07

我想获得带有父元素本身的元素的innerHTML。由于我使用的是element.innerHTML，它返回的是元素内部的值，而不是父元素。那么，在JavaScript中有什么方法可以做到这一点吗？

注意：请注意，我不想为此使用任何jQuery。

尝试-http://jsfiddle.net/PF68B/

var content = document.getElementById("elem").parentNode.innerHTML;

如果您想要带有父标记的内容-http://jsfiddle.net/PF68B/1/

var content   = document.getElementById("elem").parentNode.innerHTML;
var parentTag = document.getElementById("elem").parentNode.tagName.toLowerCase();

更新

如果您需要具有所有属性的父节点-http://jsfiddle.net/PF68B/4/

var content   = document.getElementById("elem").parentNode.innerHTML;
var parentTag = document.getElementById("elem").parentNode.tagName.toLowerCase();
var el = document.getElementById("elem").parentNode;
var nodes=[], values=[];
for (var attr, i=0, attrs=el.attributes, l=attrs.length; i<l; i++){
    attr = attrs.item(i)
    nodes.push(attr.nodeName);
    values.push(attr.nodeValue);
}
var parentAttr  = '<' + parentTag;
for ( var i = 0; i < nodes.length; i++ ) {
    parentAttr += ' ' + nodes[i] + '="' + values[i] + '"';
}
parentAttr += '>' + content + '</' + parentTag + '>';

我想您正在寻找.outerHTML属性。但由于旧的Firefox（版本<11.0）不支持它，您可以使用以下脚本：

var tmpParent = document.createElement('div');
//Appending moves elements from its parents.
//For safety, clone was used instead of original node.
var cloneElem = yourDomElement.cloneNode();
cloneElem.innerHTML = yourDomElement.innerHTML;
tmpParent.appendChild( cloneElem );
//Markup
var elementMarkup = tmpParent.innerHTML;
console.log( elementMarkup );

实时演示

相关文章：