How to append paragraph with text from array?
First I put element in array:
var iminja = [];
iminja.push("Name1");
Then I use for loop for each element in array "iminja" where I want to put new paragraph to existing empty div with the text from the array. Something like this, which is just to explain you how I want to be the final result in function:
$('#existingDiv').append('<p style="border: 1px solid black;">iminja[index]</p>');
Can someone help me for this?
The following code should do the trick:
$.each(iminja, function () {
$("#existingDiv").append("<p style=\"border: 1px solid black;\">" + this + '</p>');
});
or not using $.each function
for (var item in iminja) {
$("#existingDiv").append("<p style=\"border: 1px solid black;\">" + iminja[item] + '</p>');
}
or without using jQuery at all
var container = document.getElementById("existingDiv");
for (var item in iminja) {
var paragraph = document.createElement("p");
paragraph.setAttribute("style", "border: 1px solid black;");
paragraph.innerHTML = iminja[item];
container.appendChild(paragraph);
}
append function also?To iterate over an array you can use forEach:
iminja.forEach(addp);
This will call addp() for each element in iminja. This is how you can implement that function:
function addp(str)
{
var par = document.createElement('P');
par.setAttribute('style', 'border: 1px solid black');
par.appendChild(document.createTextNode(str));
document.getElementById('existingDiv').appendChild(par);
}
It creates a new <p> element, specifying the text contents and required style, and then appends that to your existing element container.
Test this file
Full HTML page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dimac</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="existingDiv">
<p>Some texts in #existingDiv</p>
</div>
<script type="text/javascript">
var iminja = [];
iminja.push('Name1');
iminja.push('Name2');
iminja.push('Name3');
iminja.push('stackoverflow');
iminja.push('Dimac');
iminja.push('Ersin Basaran');
iminja.push('Jack');
iminja.push('Adnan');
/*
//Example1 by Ersin Basaran ( edited by Adnan )
$.each(iminja,function(){
$('#existingDiv').append('<p style="border: 1px solid #000;">'+this+'</p>');
});
*/
/*
//Example2 by Ersin Basaran ( edited by Adnan )
for(i in iminja){
$('#existingDiv').append('<p style="border: 1px solid #000;">'+iminja[i]+'</p>');
};
*/
//Example3 by Adnan
for(i=0;i<iminja.length;i++){
$('#existingDiv').append('<p style="border: 1px solid #000;">'+iminja[i]+'</p>');
}
/*
//Example4 by Jack ( edited by Adnan )
function addp(str){
$('#existingDiv').append('<p style="border:solid 1px #000;">'+str+'</p>');
}
for(i=0;i<iminja.length;i++){
addp(iminja[i]);
}
*/
</script>
</body>
</html>