We Keep Coding

How to sandbox a div element?

I am trying to build a content editor. This contenteditor will load a HTML document (with JavaScript) into for example a #result element. The problem with this, is that if inside this HTML element there is for example $("input").hide();, then all of my inputs are gone throughout the whole page, so not just inside the loaded HTML (my goal).
What I want to do with the editor is when a client clicks on an element that represents something in the database, the info of this element will popup and the user will be able to edit this. (So, if a user hovers over a form with the class "contact-form" (which is in the database, connected to the loaded page) a new window will popup with information about this specific form element.
Also, I cannot completely disable Javascript, since the loaded HTML might contain Javascript for styling etc.
My goal: Remove Javascript, that can be annoying when a user loads in an HTML file. Like an alert(); Also, remove the ability for the Javascript to edit somehthing outside it's own DOM.
P.S. I am open to better workarounds like using an iframe for this, BUT I want to be able to hover over elements in interact with them.
Edit: It seems that this question might be a bit too broad, looking at the comments. Summary of my question: How can I disable alert() for a specific div and how can I create a sandbox so that code inside a div, can only change elements from inside that div.

What you're looking for is HTML sanitization. This is the process by which you remove any dangerous content from a snippet of HTML on the server, before it's loaded in the browser. There are plenty of sanitization libraries out there that can strip script tags, object tags, etc. Just remember, you can't sanitize using javascript because by the time you've injected your script, another malicious script may have already loaded and run.
The only way to effectively sandbox a javascript environment is with iframes. You'll notice that websites like CodePen, JSBin and JSFiddle use them extensively. There's something called the ShadowDOM, which is the basis of Web Components, but it isn't very well supported yet.
To make it possible to run your own frontend scripts that allow for hovering, you can inject your script after your sanitization process. This way, if it's loaded inside an iframe your script will also be loaded.
Finally, alert() doesn't belong to any elements on the DOM. You can trigger an alert as soon as the page loads, for example. However, if you're trying to prevent alerts from popping up on user interactions, you could try removing all event listeners from a particular element. This won't be necessary if you sanitize the HTML of script tags, however, since the script wouldn't have had a chance to load so there won't be any event listeners.

You can use ShadowDOM to load an html document into a host node. See also WHY SHADOW DOM?

where to store html strings on client for later DOM insertion?

In a single-page-application, there are certain views (i.e. chunks of html code) that are not shown at the start, but may be shown later. I can append these views to the DOM when needed, but I don't want to have to dynamically load them from the server. Instead I want to load them from the server when the rest of the page loads. Where is the best place to put such multi-line html chunks, so that they can easily be accessed from javascript and appended to the DOM? Does there exist special html tags for this kind of thing?

You can store theses html parts in div width display:none (one div by html part), to show them when needed, where needed (by manipulating DOM structure).

How to know which JS script manipulated certain elements of the DOM using Firebug

I am inspecting a website, which has tons of JS files loaded from several servers along with jQuery. Number of js files is really big. Some are within the regular scripts tags. Others are loaded dynamically via ajax.
I am interested in certain elements of the DOM which are manipulated because of some js file. I see the dynamic loaded elements in firebug. I needed to know exactly which JS script creates/updates them.
I searched the js files for the classes and the IDs of the elements,so I can have some clue about which js file affects them, but I found nothing.
Is there any direct way using Firebug to know exactly which JS file manipulates certain DOM elements?
Thanks in advance.

Not in a direct way.
Use EventBug addon
Then search by the function signature in your script panel to drill down to the js file
Hope this helps!

You should be able to go to Script tab in firebug, then look at the toolbar right below the script tab you can select all the javascript files included on the page.
If you have an idea which file it is coming from then select that file and then look through the code and set break points on functions you think the event is coming from by clicking on the respective line number, then refresh the page and perform the event that calls the javascript.
You might have to put in a few before you narrow it down, but the break points will make it alot easier to tell which functions are being called for which events.

What is the difference between HTML DOM and XML DOM

In the w3school site there are two tutorials:
HTML DOM
XML DOM
I want to know the releationship of them, since I think the HTML DOM is one kind of XML DOM.
So the methods/properties in the XML DOM can be used in HTML DOM, and the HTML DOM may own some special methods.
However, when I try to use this:
HTML:
<span id="con">xxx</span>
var a=document.createElement("a");
document.getElementById("con").appendChild(a);
It does not work in IE.
So I wonder what is the problem?

DOM refers to a tree you make out of XML. The tree is made up of nodes. For example:
<a x="bb">
<b> text </b>
</a>
turns into a tree with three nodes: one for a and one for b and one for the text. The nodes contains the attributes as fields. So the a node will have a field: x="bb".
HTML is (practically) XML so you can build a DOM tree out of it. HTML is just XML with predefined elements. I.e., you can't use whatever names you want for your elements (you can't use <children>, <ball>,...) you can use the predefined names (a, span, div, ...).
I say "practically" because HTML is usually broken XML (for example using <br> is wrong XML. you should use <br /> instead). The browsers have smart parsers that know how to overcome this broken XML and make a usuable tree out of the HTML.

You have an error in your code, it misses an 'e':
document.getElementById('con').appendChild(a);

appendChild() is buggy in IE

Possible to create custom "DOMs" by loading HTML from string in Javascript?

I'm trying to parse HTML in the browser. The browser receives 2 HTML files as strings, eg. HTML1 and HTML2.
I now need to parse these "documents" just as one would parse the current document. This is why I was wondering if it is possible to create custom documents based on these HTML strings (these strings are provided by the server or user).
So that for example the following would be valid:
$(html1Document).$("#someDivID")...
If anything is unclear, please ask me to clarify more.
Thanks.

var $docFragment = $(htmlString);
$docFragment.find("a"); // all anchors in the HMTL string
Note that this ignores any document structure tags (<html>, <head> and <body>), but any contained tags will be available.

With jQuery you can do this:
$(your_document_string).someParsingMethod().another();

You can always append your html to some hidden div (though innerHTML or jQuery .html(..)). It won't be treated exactly as a new document, but still will be able to search its contents.
It has a few side-effects, though. For example, if your html defines any script tags, they'll be loaded. Also, browser may (and probably will) remove html, body and similar tags.
edit
If you specifically need title and similar tags, you may try iframe loading content from your server.