1

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?

4 Answers 4

1

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);
}
3
  • I think about that but i forgot to write that function for adding new paragraph for text must be clear javascript function, no jquery...
    – user4539337
    May 25, 2015 at 0:56
  • you mean without append function also? May 25, 2015 at 1:01
  • Yes...just "append" method is jQuery method. How would be without append method?
    – user4539337
    May 25, 2015 at 1:06
1
$('#existingDiv').append('<p style="border: 1px solid black;">'+iminja[index]+'</p>');

NOT

$('#existingDiv').append('<p style="border: 1px solid black;">iminja[index]</p>');
1
  • Please, try to give an explanation.
    – cнŝdk
    May 25, 2015 at 7:40
1

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.

2
  • You've tagged the question with jquery :p
    – Ja͢ck
    May 25, 2015 at 14:26
  • Yes I know but after that I realize that i can't use jQuery, buw however we solve the problem :)
    – user4539337
    May 25, 2015 at 14:28
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.