We Keep Coding

added herf element not click-able

I am trying to add a download element to the page. I click it using Greasemonkey.
The new div has been added to the page but the download window is not opening.
var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body') [0].appendChild(iDiv);
iDiv.innerHTML = '<button class=button> <a href=' + link + ' target=_blank> </button>';
document.getElementsByClassName('button') [0].click();

<a href=http://somesite.com target=_blank> is invalid. You're missing quotes around the URL.
Also, as #Springfield pointed out, you're not closing your <a> tag.
Solution :
iDiv.innerHTML = '<button class="button"> Link</button>';
which renders :
iDiv.innerHTML = '<button class="button"> Link</button>';

Don't wanna be rude, but first questions first: Where does your anchor-tag end?
You open an a-tag, but its content as well as the end tag are both missing.

.append() adds html as text

I'm using javascript to add html to my 's.
I made a loop that goes around all projects there are. There are multiple projects and in every project there are multiple pictures.
The first part creates the first projecttitle within a div that gets an id(the projectname) and the first pictures.
$( ".projectbeeldcontainer" ).append(
'</div>'+
'<h1 class="projecttitel" id="'+name+'">'+name+'</h1>'+
'<div class="row dashboardrow" id="'+name+'id">'+
'<div class="col-sm-2">'+
'<div class="thumbnail">'+
'<a href="/w3images/lights.jpg">'+
'<img src="projectbeelden/'+name+'/'+decodeURI(image)+'" class="img-rounded">'+
'</a>'+
'<div class="caption tags">'+
'<p>titel van project</p>'+
'</div>'+
'</div>'+
'</div>';
);
After this, the script will check if the projectname of the next image allready exists. If it does exist (because we added it with the code above), then it will insert a new div inside of the project div we created:
document.getElementById(name+'id').append(
'<div class="col-sm-2">'+
'<div class="thumbnail">'+
'<a href="/w3images/lights.jpg">'+
'<img src="projectbeelden/'+name+'/'+decodeURI(image)+'" class="img-rounded">'+
'</a>'+
'<div class="caption tags">'+
'<p>titel van project</p>'+
'</div>'+
'</div>'+
'</div>'
);
The problem i have now is that the first line of code successfull creates the div's and the image. The second code works for 98%.
It does recognise the div with the id and puts the content in it. But the problem is that it adds quotes before my first line and after. So it looks like it thinks it's a string and not html.
So it literally adds "<div ..." on my page.
Can anyone help me please? Sorry for the bad spelling and grammar.

Use innerHTML instead of append.
document.getElementById(name+'id').innerHTML += "<div> put your html </div>";
Append adds a textNode. Better way is something like this by generating it and inserting into the DOM:
var el = document.createElement("div");
el.appendChild(document.createTextNode("Put yout HTML"));
document.getElementById(name+'id').appendChild(el);

The problem is that you are literally telling it to append a string to the DOM, you are not creating an element that you can insert.
If you wrap the html that you are trying to append in the jQuery wrapper $('<div class="col-sm-2">....</div>');, then it will be treated by jQuery as an a jQuery object and should then be able to be inserted in the manor that you need.

This work to me
var stringToHTML = function (str) {
var parser = new DOMParser();
var doc = parser.parseFromString(str, 'text/html');
return doc.body;
};
$( ".projectbeeldcontainer" ).append(stringToHTML('<p>text</p>'))

DEMO
var insertData = '<div class="col-sm-2">'+
'<div class="thumbnail">'+
'<a href="/w3images/lights.jpg">'+
'<img src="" class="img-rounded">'+
'</a>'+
'<div class="caption tags">'+
'<p>titel van project</p>'+
'</div>'+
'</div>'+
'</div>';
document.getElementById('a').innerHTML = insertData;
<div id="a"></div>

You can just use < and > instead of "<" and ">" in your code. Browser will not recognize this string as html code and print it as a plain text.

slideToggle() doesn't push elements created with jquery append() down

I do have a problem using slideToggle(). The following DOM elements won't be pushed down, they just overlap. I tried a lot of versions. I do create the tags with jquery getting a JSON from which I fill in the tag content, so I iterate over the JSON to create the HTML tags for each element :
var project_infos = '';
jQuery(document).ready(function(){
$.getJSON('project.json', function(data){
project_infos += '<div class=\"row\">'
+ '<div class=\"span3\">'
+ '<div class=\"well\">'
+ '<div>'
+'<ul class=\"nav nav-list sidebar-list\">';
for( var i = 0; i < data.length; i ++ ) {
var project_name = data[i]["item"];
project_infos += '<li>'
+'<label class=\"tree-toggler nav-header\">'
+'<i class=\"fa fa-arrow-right\"></i>' + project_name + '</label>'
+'<ul class=\"nav nav-list tree\">'
+'<li><label class=\"tree-toggler nav-header\">Katalogue</label></li>'
+'<li>'
+'<ul class=\"nav nav-list tree\">'
+'<li>Link</li>'
+'<li>Link</li>'
+'<li>Link</li>'
+'</ul>'
+'</li>'
+'<li><label class=\"tree-toggler nav-header\">History</label></li>'
+'<li><label class=\"tree-toggler nav-header\">Whole project</label></li>'
+'</ul>'
+'</li>';
}
project_infos += '</ul></div></div></div></div>';
$('#tree').append(project_infos);
$('.tree-toggler').click(function () {
$(this).parent().children('ul.tree').slideToggle('slow');
});
});
});
EDIT : screenshot of html output.
screenshot html output
Thanks in advance!

Use
find() instead of children()
$(this).parent().find('ul.tree').slideToggle('slow');
children() will only search for first level child elements.

I just reset all css styles for my div and finally it worked. I already defined styles for the sidebar and for the ul and li tags. One of the styles was the problem. It kept the elements from toggle down in the sidebar.
Thanks for your time!

How to remove jQuery [object Object] message

I created a java variable called 'html' in which I add a div with anchor inside using jQuery which I use for a revel modal popup. When I launch the site the modal works fine but I get this [object Object] message next to it and I don't really know why. Is there a way to remove it or do I need to modidy the code? You can find an example here Website Example by clicking on any marker. I am using ajax jquery 1.8.0.
html = '<div id="infoWindow">';
if (paddimg) {var html = html + '<a class="infoa" data-reveal-id="modal2" href="#" data-animation="fade"></a>'};
if (paddimg) {var div = $('<div id="modal2" class="modal"><p>Public address: '+padd+'</p><br/><img width="200px" src="'+paddimg+'"><a class="close-reveal-modal">×</a></div>')};
$('body').append(div);
if (paddimg) {var html = html + div};
var html = html + '<\/div>';

Your problem is you have a JQuery object, var div = $('<div id="modal2" class="modal"><p>Public address: '+padd+'</p><br/><img width="200px" src="'+paddimg+'"><a class="close-reveal-modal">×</a></div>') (regardless of how valid it is) and you are concatenating it to a string if (paddimg) {var html = html + div};
you would see the same [object Object] if you just printed div to the console
without seeing the rest of your code (or really understanding why you have done things like this) I assume this segment should look like :
html = '<div id="infoWindow">'
if (paddimg) {
html = html + '<a class="infoa" data-reveal-id="modal2" href="#" data-animation="fade"></a>'
var div = '<div id="modal2" class="modal"><p>Public address: '+padd+'</p><br/><img width="200px" src="'+paddimg+'"><a class="close-reveal-modal">×</a></div>'
$('body').append(div)
}
html = html + '<\/div>'

this is your immediate problem:
if (paddimg) {var html = html + div};
you are using div as a string
maybe try this:
html = $('<div id="infoWindow"></div>');
if (paddimg) {
var _a = $('<a class="infoa" data-reveal-id="modal2" href="#" data-animation="fade"></a>')
var div = $('<div id="modal2" class="modal"><p>Public address: ' + padd + '</p><br/><img width="200px" src="' + paddimg + '"><a class="close-reveal-modal">×</a></div>')
html.append(_a).append(div);
} else {
$('body').append(div);
}

Make a hyper link on Html link with Jquery

I have Html contents like
<span>
http://j.mp/eUcRNK
</span>
I want to hyperlink on above html text like this
<span>
<a href="http://j.mp/eUcRNK" class="link" target="_blank">
http://j.mp/eUcRNK
</a>
</span>
How I can do that..

$('span').html(function(i,txt){
return $('<a>').text(txt).attr({'target':'_blank', 'href': txt }).addClass('link');
});
demo
based on the comments below, I guess this solves it.
$('span').html(function(i,txt){
return replaceURLWithHTMLLinks(txt);
});
function replaceURLWithHTMLLinks(text) {
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
return text.replace(exp,"<a class='link' href='$1' target='_blank' >$1</a>");
}
updated fiddle
for jquery 1.3.2, just change the jQuery codes a bit.
var span = $('span');
span.html(replaceURLWithHTMLLinks(span.html()));
another updated fiddle

Try
$("span").each(function(){
var text = $(this).text();
$(this).contents().wrap("<a class='link' href='" + text + "' target='_blank' />")
});