blocks|key|312948|text|这里有一个tagName属性，还有一个attributes属性：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|312949|var+element+=+document.getElementById("wtv");
var+openTag+=+"<"%2Belement.tagName;
for+(var+i+=+0;+i+<+element.attributes.length;+i%2B%2B)+{
++++var+attrib+=+element.attributes[i];
++++openTag+%2B=+"+"%2Battrib.name+%2B+"="+%2B+attrib.value;
}
openTag+%2B=+">";
alert(openTag);|code-block|syntax|javascript|312950|另请参阅How+to+iterate+through+all+attributes+in+an+HTML+element?+(我做到了！)|312951|要获得开始标记和结束标记之间的内容，如果不想遍历所有子元素，则可以使用innerHTML+...|312952|alert(element.innerHTML);|312953|..。然后使用tagName再次获得结束标记。|312954|var+closeTag+=+"</"%2Belement.tagName%2B">";
alert(closeTag);|312955|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/828311/how-to-iterate-through-all-attributes-in-an-html-element^0|5|7|J|A|0|0|4|1L|0|0|Z|9|0|0|7|7|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|18|8|@]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|M|3|N|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|O|3|P|5|H|7|1F|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|S|3|T|5|H|7|1J|8|@]|D|@]|E|$I|J]]|$1|U|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]]]

<p>There's a <code>tagName</code> property, and a <code>attributes</code> property as well:</p>

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

<p>See also <a href="https://stackoverflow.com/questions/828311/how-to-iterate-through-all-attributes-in-an-html-element">How to iterate through all attributes in an HTML element?</a> (I did!)</p>

<p>To get the contents between the open and close tags you could probably use <code>innerHTML</code> if you don't want to iterate over all the child elements...</p>

<pre><code>alert(element.innerHTML);
</code></pre>

<p>... and then get the close tag again with <code>tagName</code>.</p>

<pre><code>var closeTag = "&lt;/"+element.tagName+"&gt;";
alert(closeTag);
</code></pre>


blocks|key|3268804|text|element+HTML属性(注意：supported+by+Firefox+after+version+11)返回整个元素的outerHTML。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3268805|示例|3268806|<div+id="new-element-1">Hello+world.</div>

<script+type="text/javascript"></script>|code-block|syntax|javascript|3268807|类似地，可以使用innerHTML获取给定元素中包含的超文本标记语言，或者使用innerText获取元素中的文本(sans+HTML+markup)。|3268808|另请参阅|3268809|3268810|outerHTML+-+Javascript+Property|ordered-list-item|3268811|Javascript+Reference+-+Elements|3268812|3268813|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/element.outerHTML|1|http://javascript.gakaa.com/element-outerhtml.aspx|2|http://javascript.gakaa.com/c/element.aspx^0|1R|9|I|11|0|0|0|0|8|9|13|9|0|0|0|0|V|1|0|0|V|2|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|F|3|G|5|6|7|1F|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1G|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1H|8|@$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1M|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]|$1|R|3|S|5|T|7|1O|8|@]|D|@$9|1P|A|1Q|1|1R]]|E|$]]|$1|U|3|V|5|T|7|1S|8|@]|D|@$9|1T|A|1U|1|1V]]|E|$]]|$1|W|3|-4|5|6|7|1W|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1X|8|@]|D|@]|E|$]]]|Y|$Z|$5|10|11|12|E|$13|14]]|15|$5|10|11|12|E|$13|16]]|17|$5|10|11|12|E|$13|18]]]]

<p>The element <code>outerHTML</code> property (note: <a href="https://developer.mozilla.org/en-US/docs/Web/API/element.outerHTML" rel="noreferrer">supported by Firefox after version 11</a>) returns the HTML of the entire element.</p>
<h1>Example</h1>
<pre><code>&lt;div id=&quot;new-element-1&quot;&gt;Hello world.&lt;/div&gt;

&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--

var element = document.getElementById(&quot;new-element-1&quot;);
var elementHtml = element.outerHTML;
// &lt;div id=&quot;new-element-1&quot;&gt;Hello world.&lt;/div&gt;

--&gt;&lt;/script&gt;
</code></pre>
<p>Similarly, you can use <code>innerHTML</code> to get the HTML contained within a given element, or <code>innerText</code> to get the text inside an element (sans HTML markup).</p>
<h1>See Also</h1>
<ol>
<li><a href="http://javascript.gakaa.com/element-outerhtml.aspx" rel="noreferrer">outerHTML - Javascript Property</a></li>
<li><a href="http://javascript.gakaa.com/c/element.aspx" rel="noreferrer">Javascript Reference - Elements</a></li>
</ol>


blocks|key|316092|text|您可以通过克隆元素，将其添加到一个空的“后台”容器中，并读取容器的innerHTML来获得“get+html”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|316093|这个例子有一个可选的第二个参数。|316094|调用document.getHTML(element，true)以包含元素的后代。|316095|document.getHTML=+function(who,+deep){
++++if(!who+%7C%7C+!who.tagName)+return+'';
++++var+txt,+ax,+el=+document.createElement("div");
++++el.appendChild(who.cloneNode(false));
++++txt=+el.innerHTML;
++++if(deep){
++++++++ax=+txt.indexOf('>')%2B1;
++++++++txt=+txt.substring(0,+ax)%2Bwho.innerHTML%2B+txt.substring(ax);
++++}
++++el=+null;
++++return+txt;
}|code-block|syntax|javascript|316096|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You can get the 'outer-html'  by cloning the element,
adding it to an empty,'offstage' container,
and reading the container's innerHTML.</p>

<p>This example takes an optional second parameter.</p>

<p>Call document.getHTML(element, true) to include the element's descendents.</p>

<pre><code>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('&gt;')+1;
        txt= txt.substring(0, ax)+who.innerHTML+ txt.substring(ax);
    }
    el= null;
    return txt;
}
</code></pre>


blocks|key|3268844|text|这可能不适用于所有情况，但是在从xml中提取数据时，我遇到了这个问题，我用下面的代码解决了这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3268845|function+grab_xml(what){
var+return_xml+=null;
++++$.ajax({
++++++++++++++++type:+"GET",
++++++++++++++++url:+what,
++++++++++++++++success:function(xml){return_xml+=xml;},
++++++++async:+++false
++++++++});
return(return_xml);
}|code-block|syntax|javascript|3268846|然后获取xml：|3268847|var+sector_xml=grab_xml("p/sector.xml");
var+tt=$(sector_xml).find("pt");|3268848|然后，当我需要从包含html标签的xml文件中读取内容时，我使用此函数来提取XML行。|3268849|++++function+extract_xml_line(who){
++++var+tmp+=+document.createElement("div");
++++tmp.appendChild(who[0]);
++++var+tmp=$(tmp.innerHTML).html();
++++return(tmp);
}|3268850|现在来总结一下：|3268851|var+str_of_html=+extract_xml_line(tt.find("intro"));+//outputs+the+intro+tag+and+whats+inside+it:+helllo++<b>in+bold</b>|3268852|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>This might not apply to everyone case, but when extracting from xml i had this problem, which i solved with this.</p>

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

<p>then get the xml:</p>

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

<p>Then 
    I then made this function to extract xml line , when i need to read from an XML file, containing html tags.</p>

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

<p>and now to conclude:</p>

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


blocks|key|3055232|text|最简单的方法是将该元素的innerHTML复制到临时变量并使其为空，然后追加新元素，然后将临时变量复制回该变量。下面是我用来将jquery脚本添加到head顶部的一个示例。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3055233|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+%2B=+tmpHead;|code-block|syntax|javascript|3055234|就这么简单:)|3055235|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>The most easy way to do is copy innerHTML of that element to tmp variable and make it empty, then append new element, and after that copy back tmp variable to it.
Here is an example I used to add jquery script to top of head.</p>

<pre><code>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;
</code></pre>

<p>That simple :)</p>


blocks|key|3268885|text|我正在使用Angular，并且需要同样的东西，并在这篇文章中找到了它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3268886|@ViewChild('myHTML',+{static:+false})+_html:+ElementRef;
this._html.nativeElement;|code-block|syntax|javascript|3268887|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I was using Angular, and needed the same thing, and landed at this post.</p>

<pre><code>@ViewChild('myHTML', {static: false}) _html: ElementRef;
this._html.nativeElement;
</code></pre>


blocks|key|316124|text|假设您的元素是整个[object+HTMLDocument]。您可以通过以下方式将其转换为字符串：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|316125|​|316126|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+%2B+html);|code-block|syntax|javascript|316127|316128|entityMap^0|9|L|19|3|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|V|8|@]|E|@]|F|$]]|$1|I|3|J|5|K|7|W|8|@]|E|@]|F|$L|M]]|$1|N|3|H|5|6|7|X|8|@]|E|@]|F|$]]|$1|O|3|-4|5|6|7|Y|8|@]|E|@]|F|$]]]|P|$]]

<p>Suppose your element is entire <code>[object HTMLDocument]</code>. You can convert it to a <strong>String</strong> this way:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const htmlTemplate = `&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;`;

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

const doctype = '&lt;!DOCTYPE html&gt;';
const html = doc.documentElement.outerHTML;

console.log(doctype + html);</code></pre>
</div>
</div>
</p>


<p>I am going to create an XML element in JavaScript to exchange data with server side. I found I can do it with <code>document.createElement</code>. But I do not know how to convert it to string. Is there any API in browser to make it easier? Or is there any JS library including this API?</p>

<p><strong>EDIT:</strong> I found that browser API XMLSerializer, it should be the right way to serialize to string.</p>


How to convert a HTMLElement to a string

服务器

容器

我将在JavaScript中创建一个XML元素来与服务器端交换数据。我发现我可以用document.createElement做到这一点。但我不知道如何将其转换为字符串。浏览器中有没有什么API可以让它变得更简单？或者有没有包含此API的JS库？编辑：我找到了浏览器XMLSerializer，它应该是序列化成字符串的正...

问如何将HTMLElement转换为字符串
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将HTMLElement转换为字符串EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将HTMLElement转换为字符串
EN