append not working in javascript

[Madasamy P, modificado hace 6 años.]

<form id="fm"></form>

<script>


var previewURL = '<%=urls%>';

previewURL = previewURL.split(', ');


for (i = 0; i < previewURL.length; i++) {

var query ='<div style="height: 250px;width: 250px;border:1px solid #ff8533;background: url('+previewURL+')no-repeat;background-size:100% 100%;"></div>';

document.getElementById("fm").append(query);
}

</script>


The query appended like as text inside form
After Inspect that element it would like this

<form id="fm"></form>
"<div style="height: 250px;width: 250px;border:1px solid #ff8533;background: url(http://localhost:8080/documents/20181/22221/Image-red.jpg/c77ac788-11be-46d0-a109-6aa5f7cdb4c3?version=1.0&t=1493119792000&imagePreview=1)no-repeat;background-size:100% 100%;"></div>"

So the functionality not works

[David H Nebinger, modificado hace 6 años.]

Madasamy P:

document.getElementById("fm").append(query);

The query appended like as text inside form
After Inspect that element it would like this

<form id="fm"></form>
"<div style="height: 250px;width: 250px;border:1px solid #ff8533;background: url(http://localhost:8080/documents/20181/22221/Image-red.jpg/c77ac788-11be-46d0-a109-6aa5f7cdb4c3?version=1.0&t=1493119792000&imagePreview=1)no-repeat;background-size:100% 100%;"></div>"

This is not a Liferay problem, this is merely a lack of understanding of basic javascript. I think there are javascript newbie forums that may help you learn the ins and outs of javascript. The w3schools site does a good job at sharing basic JS functionality.









Come meet me at the 2017 LSNA!

[Madasamy P, modificado hace 6 años.]

David H Nebinger:

Madasamy P:

document.getElementById("fm").append(query);

The query appended like as text inside form
After Inspect that element it would like this

<form id="fm"></form>
"<div style="height: 250px;width: 250px;border:1px solid #ff8533;background: url(http://localhost:8080/documents/20181/22221/Image-red.jpg/c77ac788-11be-46d0-a109-6aa5f7cdb4c3?version=1.0&t=1493119792000&imagePreview=1)no-repeat;background-size:100% 100%;"></div>"

This is not a Liferay problem, this is merely a lack of understanding of basic javascript. I think there are javascript newbie forums that may help you learn the ins and outs of javascript. The w3schools site does a good job at sharing basic JS functionality.









Come meet me at the 2017 LSNA!

Thank you David I found the solution already in w3schools site

var div = document.createElement("div");
div.style.width = "250px";
div.style.height = "250px";
div.style.background = "red";
div.style.border = "1px solid #ff8533";
div.style.background = 'url('+previewURL+') no-repeat';
div.style.backgroundSize = "100% 100%";
document.getElementById("fm").appendChild(div);


It works