How to Do Outerhtml in Firefox

How do I do OuterHTML in firefox?

Figured it out!

child.getAttributeNode("OnClick").nodeValue;

getAttribute didn't work, but getAttributeNode worked great ;D

outerHTML behavior in a template

The other web browsers won't treat it like an error because they are following the DOM Parsing and Serialization W3C Candidate Recommendation (which is not a standard yet):

On setting [outerHTML], the following steps must be run:

1. Let parent be the context object's parent.
2. If parent is null, terminate these steps. There would be no way to obtain a reference to the nodes created even if the remaining steps were run.
3. If parent is a Document, throw a DOMException with name "NoModificationAllowedError" exception.
4. If parent is a DocumentFragment, let parent be a new Element with body as its local name, the HTML namespace as its namespace, and the context object's node document as its node document.
5. Let fragment be the result of invoking the fragment parsing algorithm with the new value as markup, and parent as the context element.
6. Replace the context object with fragment within the context object's parent.

The <template>'s content is of type DocumentFragment (step 4) but it is treated (in this situation) as a Document (step 3) by Chrome and Safari.

Modify outerHTML of video element without destroying video

It's not clear what kind of stuff you're trying to do with the video itself. But, I would first try and get away with CSS. If you really want to rip out the video and then wrap it in your own HTML and put it back where it was, you can do this:

// Get reference to the video elementconst videoElement = document.getElementsByTagName('video')[0];// Clone the elementconst videoClone = videoElement.cloneNode(true);// Create your new containerconst videoContainer = document.createElement('div');// Do what you want with the new containerconst someHeading = document.createElement('h1');someHeading.innerText = 'This is a video';// Append stuff to the new containervideoContainer.append(someHeading);// Append the cloned video to the new containervideoContainer.append(videoClone);// Remove the old videovideoElement.remove();// Append your new video container with cloned videodocument.body.append(videoContainer);

<video width="320" height="240" controls>  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">  Your browser does not support the video tag.</video>

How can I get Firefox to attach an XML namespace to my html element?

Firefox is treating the document as an XMLDocument, not an HTML document. You can tell this because if you get an element's tagName, if it's an HTML document, the tagName will be in upper case, even if you specify createElement() in lower case. That doesn't happen in an XMLDocument.

See http://jsfiddle.net/70avhuo3/6/ as opposed to http://jsfiddle.net/70avhuo3/7/

You're not seeing the xmlns attribute because of the implementation of outerHTML. For an XML document, this should, according to the DOM serialization and parsing draft spec, serialize the DOM to XML, but it seems Firefox doesn't do that.

You can use new XMLSerializer().serializeToString(myDocument.documentElement); instead, to get an XML serialization in Firefox. See http://jsfiddle.net/70avhuo3/8/

---

By the way, I strongly encourage you to always use createElementNS() with XMLDocuments, never createElement(). In DOM3 createElement() will put the element in the null namespace, while the DOM4 spec currently says that it will go in the http://www.w3.org/1999/xhtml namespace, though the change remains an issue of active debate.

How to get the entire document HTML as a string?

MS added the outerHTML and innerHTML properties some time ago.

According to MDN, outerHTML is supported in Firefox 11, Chrome 0.2, Internet Explorer 4.0, Opera 7, Safari 1.3, Android, Firefox Mobile 11, IE Mobile, Opera Mobile, and Safari Mobile. outerHTML is in the DOM Parsing and Serialization specification.

See quirksmode for browser compatibility for what will work for you. All support innerHTML.

var markup = document.documentElement.innerHTML;
alert(markup);

Why getting an outer HTML does not work?

First, your first example works fine. Take a look at your output in Firebug. Note, that since your output is HTML it is rendered as HTML. Note that there are newlines before and after the HELLO............... because the HELLOs are inside DIVs!

Take a look:

---

Second w/ jQuery, you could also use the method in my answer to the question you linked to:

var outerHTML =  $('<div>').append( $("#my_div").clone() ).html();

jsFiddle example

This appends a clone of the element in question to a DIV jQuery object and gets the inner HTML of the DIV jQuery object.... which is the outerHTML of the element in question.

The general form of the outerHTML of an element is:

$('<div>').append( $(ElementSelector).clone() ).html();

where ElementSelector is the jQuery selector of the element whose outerHTML you want.

---

Note: The above adds no new elements to the DOM. $('<div>')...... is never added to the DOM. It remains merely jQuery object independent of the DOM.

how do I extend a javascript object such that in browsers that don't natively have outerHTML, I can define it?

You generally do something like :

if (!("outerHTML" in document.body)) {
    Object.defineProperty(Element.prototype, "outerHTML", {
        get: getOuterHTML,
        set: setOuterHTML
    });
}

You then read the outerHTML specification and write getOuterHTML and setOuterHTML functions that implement it.

Note: I aggressively recommend against naively implementing an outerHTML property that's not spec compliant. This is going to cause you problems in maintenance when your "version" works differently from the native version. Especially if you add propietory extensions or extra "features" to your version

Note that Object.defineProperty is undefined in older browsers. You may need to use the shim from es5-shim

---

Related Topics