Как добавить текст из массива в абзаце в javascript?

Как добавить абзац с текстом из массива?Как добавить текст из массива в абзаце в javascript?

Сначала я поставил элемент в массиве:

var iminja = []; 
iminja.push("Name1");

Затем я использую for цикл для каждого элемента в массиве «iminja», где я хочу поставить новый пункт существующего пустого div с текстом из массива. Что-то вроде этого, что просто объяснить вам, как я хочу, чтобы конечный результат в функции:

$('#existingDiv').append('<p style="border: 1px solid black;">iminja[index]</p>');

Может кто-то помочь мне в этом?

источник

2015-05-25 Dimac

Следующий код должен сделать трюк:

$.each(iminja, function() { 
    $("#existingDiv").append("<p style=\"border: 1px solid black;\">" + this + '</p>'); 
});

или не используя $.each функцию

for (var item in iminja) { 
    $("#existingDiv").append("<p style=\"border: 1px solid black;\">" + iminja[item] + '</p>'); 
}

или без использования JQuery на всех

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); 
}

источник

2015-05-25 00:54:01

Я думаю об этом, но я забыл написать эту функцию для добавления нового пункта для текста должно быть ясно, яваскрипт функции, нет jquery ... – Dimac

вы имеете в виду без функции 'append' также? –

Да ... просто метод «append» - это метод jQuery. Как будет без метода append? – Dimac

$('#existingDiv').append('<p style="border: 1px solid black;">'+iminja[index]+'</p>');

НЕ

$('#existingDiv').append('<p style="border: 1px solid black;">iminja[index]</p>');

источник

2015-05-25 07:00:50 Adnan

Пожалуйста, попробуйте дать объяснение. –

Этот код строки просто для того, чтобы объяснить, как я хочу быть функцией. – Dimac

Чтобы перебрать массив можно использовать forEach:

iminja.forEach(addp);

Это будет вызывать addp() для каждого элемента в iminja. Это, как можно реализовать эту функцию:

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); 
}

Он создает новый <p> элемент, указав содержание текста и требуемого стиля, а затем добавляет, что к существующему элементу контейнера.

источник

2015-05-25 08:46:25

Я не могу использовать jQuery, он должен быть ясным javascipt ... – Dimac

Вы отметили вопрос с помощью jquery: p –

Да, я знаю, но после что я не понимаю, что я не могу использовать jQuery, но мы решим проблему :) – Dimac

Тест этого файл

Полного HTML страница

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

источник

2015-05-26 08:13:42 Adnan

Большое вам спасибо :) – Dimac

Как добавить текст из массива в абзаце в javascript?

ответ

Смежные вопросы