Develop Reference

how to fix omit the close tag without modify original code?

I have a code like this
<div class="footer"><p>some text<p></div>
as you can see closing tag for p is omit.
how can I fix that without edit original code?
I think JavaScript can do this.

You can just modify the innerHTML of the footer element.
var footer = document.getElementsByClassName('footer')[0];
footer.innerHTML = "<p>some text</p>";
This will replace the content in the footer.

var div = document.querySelector('div.footer'); // get div element
Array.prototype.forEach.call(div.childNodes, function(childNode){ // for every element inside of div
if (childNode.innerHTML === '') { // check if that element is empty
div.removeChild(childNode); // remove that element
}
});
Working example: http://jsfiddle.net/soygb9cs/
It works because modern browsers automatically closes tags. So you get one additional empty tag if you omit backslash in closing tag.
From <div><p>some text<p></div> browser creates <div><p>some text</p><p></p></div>

JavaScript can do that, however because JavaScript runs after the page has loaded, your web page will still be classed as W3C invalid (https://validator.w3.org/).
If you just have lots of HTML with this error and you're trying to save yourself some manual labour, I suggest using something like notepad++. Copy your HTML into a new document and do a regular expression find and replace like so:

Are HTML allowed inside HTML attributes?

For example, lets say you have something like this:
<div data-object="{'str': '<h1>This is a nice headline</h1>'}"></div>
Is this allowed in HTML5 and will it render properly in all browsers?
Edit:
With properly I mean that the browser will ignore and NOT render the H1 in any way ;)

Yes, it's allowed as long as it's quoted correctly.
Will it render? The H1 element? No - because it's not an element, it's just a bit of text inside an attribute of the div element.

Yes, browsers won't render any HTML tags inside attributes. This is pretty much common when you want to move the element later so it would show up. The only problem is that this is not a way to go as this does not create an element in DOM, thus, it will be much slower.
Try to find a way or ask for an alternative/better way to reuse the element which is hidden when the page is loaded.

Yes it's allowed and possible, but to make it work you have to make it valid JSON by using double quotes:
<div data-object='{"str": "<h1>This is a nice headline</h1>"}'></div>
Now to parse it just have: (jQuery will parse it to JSON all by itself)
var element = $("div").eq(0);
var rawData = element.data("object");
var rawHTML = rawData["str"];
$(rawHTML).appendTo("body");
Live test case.

Javascript create element and add HTML

say for instance i have the following line:
var arrowBase = document.createElement('div')
Now within this div tag i want to add some HTML (i.e text).
Then i tried the following:
arrowBase.innerHTML('hello');
However this does nothing:S
i have also tried: arrowBase.HTML('hello');
But once again without any result
I know is that rather simple but in my search i could'nt find the answer hope someone is able to help me out here

Read the docs, it is not a method.
arrowBase.innerHTML = 'hello';

arrowBase.textContent = "HELLO"
also does the same thing but only text can be specified. Whereas in innerHTML html tags can be specified along with the text.

Select HTML content

I need to locate an element and grab an entire block of HTML.
I tried this:
$(this).find('h1').html();
But only was able to capture the text withing h1 tag... What am I missing?

Here's a simple plugin. Use it as follows:
$(this).find('h1').outerHtml();
If you don't want to depend on the plugin, here's a solution with less code, but not as efficient:
var html = $('<div />').html( $(this).find('h1').clone() ).html();
Here's the fiddle: http://jsfiddle.net/nxfTf/

You could try this.
$(this).find('h1')[0].outerHTML
I did this fiddle, if you need something a little more visual: http://jsfiddle.net/aPGGS/

Alternate means to get image src using JavaScript

So I know that it is easy enough to swap images of named img tags
<img name="image1" src="" />
<script>document["image1"].src="candybar.jpg";</script>
The problem is that I am being forced to use content server, and I can't name the image tag.
So If I name a Div tag that wraps the image can I use that to specify the image tag in question?
Something like..
<div id="namedDiv"><img src="" /></div>
<script>
var imgDiv=document.getElementById['namedDiv'];
imgDiv.$imgtag$.src="candybar.jpg";
</script>
So because I know the parent, and it only has 1 image tage within, i want to say "hey Div, give me your only child as an object"

Yes that follows, something like:
document.getElementById('namedDiv').getElementsByTagName('img')[0].src = 'mynewpath.jpg';

Every dom node have childNodes property which is an array of nodes. You can pick first one.
<script>
var imgDiv=document.getElementById['namedDiv'];
imgDiv.childNodes[0].src="candybar.jpg";
</script>

Depending on the markup and the browser, the <img> element may not be the only child. For example, if there is any whitespace such as a line break then many browsers other than IE will create a text node.
The easiest way is to use the getElementsByTagName method of the wrapper element, which returns a NodeList, and get the first element in that NodeList:
var div = document.getElementById("namedDiv");
var image = div.getElementsByTagName("img")[0];
image.src = "candybar.jpg";
You can shorten that if you don't mind making it slightly harder to follow:
document.getElementById("namedDiv").getElementsByTagName("img")[0].src = "candybar.jpg";
but that makes it a bit harder to debug when you make a mistake ;-)

why dont use css style and sprite for get the same resutl without javascript. ????
the idea: http://www.pixelovers.com/css-sprites-mejora-rendimiento-web-i-37249
I can explain it :)