小开

这里有一个 tagName属性，还有一个 attributes属性:

var element = document.getElementById("wtv");
var openTag = "<"+element.tagName;
for (var i = 0; i < element.attributes.length; i++) {
var attrib = element.attributes[i];
openTag += " "+attrib.name + "=" + attrib.value;
}
openTag += ">";
alert(openTag);

也请看如何遍历 HTML 元素中的所有属性？(我做到了!)

要获取 open 和 close 标记之间的内容，如果不想迭代所有子元素，可以使用 innerHTML..。

alert(element.innerHTML);

然后用 tagName再次获得关闭标签。

var closeTag = "</"+element.tagName+">";
alert(closeTag);

小开

元素 outerHTML属性(注意: 11版以后 Firefox 支持)返回整个元素的 HTML。

例子

<div id="new-element-1">Hello world.</div>


<script type="text/javascript"><!--


var element = document.getElementById("new-element-1");
var elementHtml = element.outerHTML;
// <div id="new-element-1">Hello world.</div>


--></script>

Similarly, you can use innerHTML to get the HTML contained within a given element, or innerText to get the text inside an element (sans HTML markup).

参见

小开

最佳答案

你可以通过克隆元素来得到‘ out-html’, adding it to an empty,'offstage' container, 并读取容器的 innerHTML。

此示例接受一个可选的第二个参数。

调用 document.getHTML (element，true)以包含元素的后代。

document.getHTML= function(who, deep){
if(!who || !who.tagName) return '';
var txt, ax, el= document.createElement("div");
el.appendChild(who.cloneNode(false));
txt= el.innerHTML;
if(deep){
ax= txt.indexOf('>')+1;
txt= txt.substring(0, ax)+who.innerHTML+ txt.substring(ax);
}
el= null;
return txt;
}

小开

这可能不适用于每个人的情况，但是当从 xml 中提取时，我遇到了这个问题，我用这个解决了这个问题。

function grab_xml(what){
var return_xml =null;
$.ajax({
type: "GET",
url: what,
success:function(xml){return_xml =xml;},
async:   false
});
return(return_xml);
}

然后获取 xml:

var sector_xml=grab_xml("p/sector.xml");
var tt=$(sector_xml).find("pt");

然后然后，当我需要从包含 html 标记的 XML 文件中读取时，我创建了这个函数来提取 XML 行。

    function extract_xml_line(who){
var tmp = document.createElement("div");
tmp.appendChild(who[0]);
var tmp=$(tmp.innerHTML).html();
return(tmp);
}

现在总结一下:

var str_of_html= extract_xml_line(tt.find("intro")); //outputs the intro tag and whats inside it: helllo  <b>in bold</b>

小开

最简单的方法是将该元素的 innerHTML 复制到 tmp 变量并使其为空，然后添加新的元素，再将 tmp 变量复制回来。下面是我用来将 jquery 脚本添加到页面顶部的一个示例。

var imported = document.createElement('script');
imported.src = 'http://code.jquery.com/jquery-1.7.1.js';
var tmpHead = document.head.innerHTML;
document.head.innerHTML = "";
document.head.append(imported);
document.head.innerHTML += tmpHead;

就这么简单:)

小开

我正在使用 Angular，需要同样的东西，并在这个职位着陆。

@ViewChild('myHTML', {static: false}) _html: ElementRef;
this._html.nativeElement;

小开

假设你的元素是完整的 [object HTMLDocument]，你可以这样把它转换成绳子:

const htmlTemplate = `<!DOCTYPE html><html lang="en"><head></head><body></body></html>`;


const domparser = new DOMParser();
const doc = domparser.parseFromString(htmlTemplate, "text/html"); // [object HTMLDocument]


const doctype = '<!DOCTYPE html>';
const html = doc.documentElement.outerHTML;


console.log(doctype + html);

小开

我能找到的最简单的方法是使用 Element.outerHTMLtoString ()

const element = document.createElement('div');
element.innerHTML="Hello world !";
console.log(element.outerHTML.toString());

它会回来:

"<div>Hello world !</div>"

如何将 HTMLElement 转换为字符串

例子

参见