Создание HTML в теге JavaScript

-1

Если у меня есть блок HTML-кода, я хочу использовать цикл для генерации <div item> и поместить его в тег body. Я знаю, как написать скрипт для написания html. Но как я могу сказать, что мой скрипт помещает его в тег тела?Создание HTML в теге JavaScript

Я использую Boostrap также, я открыт как для jquery, так и для чистого js-решения.

<body> 
<div id="myCarousel" class="carousel slide"> 
     <div class="carousel-inner"> 
     <div class="item active"> 
      <img src="../assets/img/examples/slide-01.jpg" alt=""> 
      <div class="container"> 
      <div class="carousel-caption"> 
       <h1>Example headline.</h1> 
       <p class="lead">vehicula ut id elit.</p> 
      </div> 
      </div> 
     </div> 

     <div class="item"> 
      <img src="../assets/img/examples/slide-03.jpg" alt=""> 
      <div class="container"> 
      <div class="carousel-caption"> 
       <p class="lead">ies vehicula ut id elit.</p> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
<body>

источник

2013-05-03 kun

Ну менее желателен способ:

document.write(...)

Или ..

document.body.appendChild(...)

Если вы используете что-то как jquery y НУ может сделать:

$('body').append(...)

источник

2013-05-03 19:03:00 Gabe

Это должно было быть самым дипломатическим выбором ответа, который я когда-либо видел: D +1 – Xotic750

С data является HTML:

$('body').append(data);

источник

2013-05-03 19:02:48

Javascript и JQuery стали взаимозаменяемыми в эти дни ... – raidenace

@ Raidenace он отметил его бутстрап, который, я считаю, зависит от jQuery –

@ Jean-BernardPellerin Да, любые функции Javascript определенно зависят от jQuery. Я думаю, что CSS не работает, но не уверен – Ian

var div = document.createElement("div"); 
document.body.appendChild(div);

источник

2013-05-03 19:03:59 Andreas

Попробуйте JQuery .append Вот ссылка ....

http://api.jquery.com/append/

Использование только Javascript:

<div id="div1"> 
<p id="p1">This is a paragraph.</p> 
<p id="p2">This is another paragraph.</p> 
</div> 

<script> 
var para=document.createElement("p"); 
var node=document.createTextNode("This is new."); 
para.appendChild(node); 

var element=document.getElementById("div1"); 
element.appendChild(para); 
</script>

источник

2013-05-03 19:04:19

Что делать, если OP не может использовать jquery? – Gabe

@Gabe Тогда они не будут использовать Twitter Bootstrap ... – Ian

Все еще вопрос помечен javascript. – Gabe

Вы можете использовать Node.appendChild

var element = document.createElement("div"); 

element.textContent = "some text"; 
document.body.appendChild(element);

jsfiddle На

источник

2013-05-03 19:04:27 Xotic750

Во-первых, вам нужна функция, которая позволяет выбирать элементы по классам. document.querySelectorAll должен делать трюк, но он не поддерживается в некоторых браузерах (например, более старые версии IE).

Вы можете использовать функцию Node.appendChild для переместить выбранных элементов. Код будет выглядеть так:

var items = document.querySelectorAll("div.item"), i; 
for (i = 0; i < items.length; i++) { 
    document.body.appendChild(items[i]); 
}

источник

2013-05-03 19:08:16

Вы можете перебрать свой массив, чтобы создать нужные вам div. Пример ниже показывает получение тега body и создание divs, а затем добавление их в тело. Вы также можете делать такие вещи, как установка innerHTML и любых атрибутов, которые вам нужны.

var createDivs = function() { 
    var body = document.body; 
    for(var i = 0, l = 10; i < l; i++) 
    { 
     var div = document.createElement('div'); 
     div.innerHtml = 'Some Text'; //set inner html of the div 
     div.setAttribute('class', 'testClass'); //set attributes of the div 
     body.appendChild(div); 
    } 
}

Вот jsFiddle Пример:

JSFiddle

Если вы используете JQuery вы можете сделать это следующим образом.

var createDivs = function() { 
    var myArray = [1,2,3,4,5,6,7,8,9,10]; 
    var body = $('body'); 
    $.each(myArray,function(index, value) { 
     body.append($('<div class="testClass" id="' + index + '">Some Text</div>')); 
    }); 
}

Вот пример JSFiddle этого

JSFiddle jQuery Example

источник

2013-05-03 19:10:10 DSlagle

Создание HTML в теге JavaScript

ответ

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