We Keep Coding

.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.

Javascript generated html - P tag generates outside of A tag

I have a popup form which is coded like this
var popup = '<div id="popup"><p id="shareHeader">Share On</p>'+
'<a href="http://www.facebook.com/sharer.php?u="'+url+'><p>Facebook</p></a>'+
'<a href="https://www.linkedin.com/cws/share?url="'+url+'><p>LinkedIn</p></a>'+
'<a href="http://twitter.com/share?text=GET%20800%20SAT&url="'+url+'><p>Twitter</p></a>'+
'</div><div id="close">Close</div>';
but when it generates it moves the p tag outside the a tag like so...
<p>Facebook</p>...
Why is this happening?

var url = 'url';
var popup = '<div id="popup"><p id="shareHeader">Share On</p>'+
'<p>Facebook</p>'+
'<p>LinkedIn</p>'+
'<p>Twitter</p>'+
'</div><div id="close">Close</div>';

putting javascript variable in a html link included within javascript code

I want a simple way to display a picture in html within a google maps infobox from a variable in javascipt. Currently the infobox displays the image link:
var address = xmldata.getElementsByTagName('postalCode')[0].firstChild.data;
var picture = xmldata.getElementsByTagName('viewItemURL')[0].firstChild.data;
var info_text = picture + '<br />' + address;
I have tried
var info_text = address + '';

try this:
var info_text = address + '<img src="'+picture+'" alt="some alt text" />';

Google-maps:Triggering event in infowindow

Trying to trigger an event in the infowindow..i have the following content string
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">'+data.name+'</h2>'+
'<div id="bodyContent">'+
'<p>'+data.address+'</p>'+
'<p></p>'+
'<p>Do You Want to change search location</p>'+
'<input type="button" value="click me" onclick="alert(\"infoWindow\")">'+
'</div>'+
'</div>';
here the alert statement is no triggering..Actually i need to implement a event that whenever i click the button i need to store that particular coordinates into local storage
any suggestions would be appreciated

Change '<input type="button" value="click me" onclick="alert(\"infoWindow\")">'+
To '<input type="button" value="click me" onclick="saveData()">'+
saveData() Function used latlng from marker which should be set GLOBAL (At start of script)
function saveData() {
var latlng = marker.getPosition();
var lat=latlng.lat();
var lng=latlng.lng();
//store data
}
EDIT
Changed from(cut & paste error in origonal)
var lat=" + latlng.lat();
var lng=" + latlng.lng();

How to write into div using javascript

I want to make a for example content variable in javascript which will have a html tags inside with certain values.
How can I put that in the div when button is pressed.
For example :
This is a content which I want to use:
var contentString = '<div id="info">'+
'<h2><b> Info:</b></h2>'+
'<div id="bodyContent">'+
'<div style=width:220px;display:inline-block;>'+
'<p> Name: '+ this.name + '</p>' +
'<p> Last name: '+ this.last+ '</p>' +
'<p>
'</div>'+
'</div>'+
'</div>'+
'</form>';
And I want to put it into : <div id=something"></div>
In javascript I can have something like:
$("#button").on('click', function() {
// What to put in here?
});

How can I put that in the div when button is pressed.
Like this:
$("#button").on('click', function() {
$('#something').html(contentString);
});
More info about html();
http://api.jquery.com/html/

It goes like this:
$("#button").on('click', function() {
$("#something").html(contentString);
});

If I'm not misunderstanding, then this will work:
$("#button").on('click', function() {
$('#something').html(contentString);
});
This does, of course, assume that you have an element with an id of button (though I assume you do, otherwise you wouldn't have put that jQuery).
JS Fiddle demo.
References:
html().

You should fix up your markup. You have unbalanced elements, and you can't have new lines in the string without escaping it. Try this instead:
var contentString = '<div id="info">'+
'<h2><b style="text-indent: 40px">Info:</b></h2>'+
'<div id="bodyContent">'+
'<div style="width:220px;display:inline-block;">'+
'<p style="text-indent: 1em">Name: '+ this.name + '</p>' +
'<p style="text-indent: 1em">Last name: '+ this.last+ '</p>' +
'</div>';
Note that I skipped the and replaced them with style attributes. You really should put these styles in a stylesheet, though.
$("#button").on('click', function() {
$('#something').html(contentString);
});
Keep in mind that the variables in contentString will not be evaluated when the click event on the button fires, meaning that this.name and this.last will not change. Do you need to update these values on click as well?