Develop Reference

how to set retrived firebase data into div using javascript

I want to put data into div which I already retrieved from firebase. Here is my javascript code:
var rootRef = firebase.database().ref().child("products");
rootRef.on("child_added", snap => {
alert(snap.val());
var image = snap.child("image").val();
var desp = snap.child("description").val();
$("#product_section").append();
});
what should I write into append parenthesis to show data into below format html code:
<div id="product_section" class="container">
<div class="row">
<div class="col-md-6 col-sm-6 productDetails">
<p>Something from description field of Firebase 1 </p>
</div>
<div class="col-md-6 col-sm-6">
<img src="image src form Firebase">
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 productDetails">
<p>Something from description field of Firebase 2 </p>
</div>
<div class="col-md-6 col-sm-6">
<img src="image src form Firebase">
</div>
</div>
</div>
I want to show image and description field between "< img >" and "< p >" respectively.

It seems you almost have the job done.
To put html tags into div, the $("#product_section").append(); need an string as input that holds corresponding structure as followings:
var image_and_desp_string =
'<div class="row">'
+ '<div class="col-md-6 col-sm-6 productDetails">'
+ '<p>' + desp + '</p>'
+ '</div>'
+ '<div class="col-md-6 col-sm-6">'
+ '<img src="' + image + '">'
+ '</div>'
+ '</div>';
$("#product_section").append(image_and_desp_string);
I try to align the code to you html tags so that it is easier to compare.

Change image source attribute in string HTML and return string HTML again

I have html web page and i want to download this web page as pdf. So that i convert this web page to string, and i must sent to the service. Namely i have unchanging string html. I can't add indicator for split string html. When the html web page too large with base 64 string images, i must change this base 64 string with avatar image url (Because it is too large to send data with json). i have short html string with changing base 64 string and then i can send to the service side to download pdf. I have an HTML string (it looks like my real html string) see below:
var stringHTML =
"
<div id="myDiv">
<img src="abc" /></div>
<img src="abc" /></div>
<img src="abc" /></div>
<img src="abc" /></div>
</div>
";
I want to change image src attribute value to xyz. Namely I want to convert the HTML string to:
stringHTML =
"
<div id="myDiv">
<img src="xyz" /></div>
<img src="xyz" /></div>
<img src="xyz" /></div>
<img src="xyz" /></div>
</div>
";
How can change this source attribute values with return again string value ? Namely i must have string html after change operation..

Based off of the linked possible duplicate question, you would do something like this:
stringHTML = stringHTML.replace(/abc/g,"xyz");
or
stringHTML = stringHTML.replace(new RegExp("abc","g"),"xyz");
It's also worth noting that your current string is not valid. You'll either need to replace the opening and closing double-quotes (") with single-quotes (') or escape the double-quotes used inside the string. And, as Ivan mentioned in the comments, javascript cannot span lines without special allowances (escaping the newline, etc). You could define it like this, I think:
let stringHTML = ' +
<div id="myDiv"> +
<img src="abc" /></div> +
<img src="abc" /></div> +
<img src="abc" /></div> +
<img src="abc" /></div> +
</div>';
You could also create an array and join it immediately:
let stringHTML = [
'<div id="myDiv">',
'<img src="abc" /></div>',
'<img src="abc" /></div>',
'<img src="abc" /></div>',
'<img src="abc" /></div>',
'</div>'
].join('');
See this question for more on multiline string definition.

how to insert multi line string html using jquery?

I have following structure and i want to append it to a <div>
but it's showing a compile time error.
$('#row1').html("<div class="4u 12u(mobile)">
<section>
<img src="images/kokan.jpg" alt="" />
<header >
<h3>result[i]</h3>
<p></p>
</header>
</section>
</div>");

$('#row1').html('<div class="4u 12u(mobile)">'
+'<section>'
+'<img src="images/kokan.jpg" alt="" />'
+'<header >'
+'<h3>'+result[i]+'</h3>'
+'<p></p>'
+'</header>'
+'</section>'
+'</div>');
You need to build a proper string, by concatenating parts. "<div class="4u this part was also breaking, you should use combinations of " '' ".

Unexpected Token in ```jQuery.html()```

what's wrong with this div tag?
$(.displayvideo).html('<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="'+data.songjson[i].url+'" data-toggle="modal" data-target="#trailer">
<img src="'+data.songjson[i].url+'" width="220" height="250">'+
'<h4>'+data.songjson[i].title+'</h4></div>');
I tried this, but I'm getting error as unexpected token.

First of all you are missing quotes in CSS selector:
$('.displayvideo')
Then HTML string is not concatenated properly. I recommend to split it into sevepa lines to see HTML structure easily:
$('.displayvideo').html(
'<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="' + data.songjson[i].url + '" data-toggle="modal" data-target="#trailer">' +
'<img src="' + data.songjson[i].url + '" width="220" height="250">' +
'<h4>' + data.songjson[i].title + '</h4>' +
'</div>'
);

You are missimg ""
Try like this
$(".displayvideo").html('<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="'+data.songjson[i].url+'" data-toggle="modal" data-target="#trailer"> <img src="'+data.songjson[i].url+'" width="220" height="250">'+ '<h4>'+data.songjson[i].title+'</h4></div>');

Your problem is you did not surround .displayvideo with quotes. You need to do
$('.displayvideo')
$('.displayvideo').html('<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="'+'data.songjson[i].url'+'" data-toggle="modal" data-target="#trailer"><img src="'+'data.songjson[i].url'+'" width="220" height="250">'+
'<h4>'+'data.songjson[i].title'+'</h4></div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="displayvideo"></div>

You should put .displayvideo in blockqoutes. so it should be like this:
$(".displayvideo").html(
'<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="' + data.songjson[i].url + '" data-toggle="modal" data-target="#trailer">' +
'<img src="' + data.songjson[i].url + '" width="220" height="250">' +
'<h4>' + data.songjson[i].title + '</h4>' +
'</div>'
);

Can't pass parameters in HTML onClick function

Me and my teammates have an issue we haven't been able to solve and hope someone can help us.
We have 4 images on the top and we want to change the content of another div when we click on them.
This is the code of the JavaScript function which puts the 4 upper images and works well. The problem appears when we try to pass parameters from the onClick() function to our modificarDetailed(). (Scroll to the right to see the most important part of img)
function insertRecommended(parent,events) {
var hola = events[0].author;
parent.append('<div class="row">\
...
<div class="col-md-3 col-sm-6">\
<img class="img-responsive img-portfolio img-hover" src="'+ events[1].image+'" alt="" onclick="modificarDetailed('+events[1].nameEvent+','+events[1].category+','+events[1].author+','+events[1].dateInit+','+events[1].image+');">\
</div>\
...
</div>')
}
This is the function which adds the HTML code of a DetailedEvent. As you can see, we try to make it dynamic and change the content of the inputs
function insertDetailedEvent(parent,event) {
parent.append('<!-- Features Section -->\
<div class="row" > \
<form id="' + "detailedform" + '">\
<div class="col-lg-12">\
<h2 class="page-header"><input type="text" name="eventname" value="'+event.eventName+'"/></h2>\
</div>\
<div class="col-md-6">\
<ul>\
<li><strong>Categoría: </strong><input type="text" name="category" value="'+event.category+'"/></li>\
<li><strong>Creador: </strong><input type="text" name="author" value="'+event.author+'"/></li>\
<li><strong>Fecha de Inicio: </strong><input type="text" name="dateInit" value="'+event.dateInit+'"/></li>\
</ul>\
<p>'+event.description+'</p>\
</form>\
</div>\
<div class="col-md-4 .col-md-offset-4">\
<img name="eventImage" class="img-responsive" src="'+event.image+'" alt="">\
</div>\
</div>\
<!-- /.row -->')
}
After that, we have this to update the content of DetailedEvent
function init(parent){
listEvent("logon",function(events){
insertRecommended(parent,events);
insertDetailedEvent(parent,events[0]);
},function(){},function(){});
}
function modificarDetailed(eventName,category,author,dateInit,image){
var documento= $("#detailedform");
documento.find('input[name="eventname"]').val(eventName);
documento.find('input[name="category"]').val(category);
documento.find('input[name="author"]').val(author);
documento.find('input[name="dateInit"]').val(dateInit);
//documento.find('img[name="eventImage"]').src(image);
}
And this is how we call the init in the html main document
<script type="text/javascript">
$(document).ready(function() {
init($('#Content'));
});
</script>
Thanks in advance.

Finally we found the solution. We saw it yesterday searching on the net but we did it wrong so it didn't work at first.
It is necessary to use '\', so this is how it was:
<img class="img-responsive img-portfolio img-hover" src="'+ events[1].image+'" alt="" onclick="modificarDetailed('+events[1].nameEvent+','+events[1].category+','+events[1].author+','+events[1].dateInit+','+events[1].image+');">\
And this is how it must be done:
<img class="img-responsive img-portfolio img-hover" src="'+ events[1].image+'" alt="" onclick="modificarDetailed(\''+events[1].nameEvent+'\',\''+events[1].category+'\',\''+events[1].author+'\',\''+events[1].dateInit+'\',\''+events[1].image+'\',\''+events[1].description+'\');">
Thanks anyway to #Barmar and #yak613 for their try.