Как вставить большой блок HTML в JavaScript?

25

Если у меня есть блок HTML со многими тегами, как вставить его в JavaScript?

var div = document.createElement('div');
div.setAttribute('class', 'post block bc2');
div.innerHTML = 'HERE TOO MUCH HTML that is much more than one line of code';
document.getElementById('posts').appendChild(div);

Как мне это сделать правильно?

    
задан Hello 29.04.2013 в 05:24
источник
  • Боюсь, я не понимаю вопроса. Что такое «блок html»? Возможно, вы можете представить свой проблемный код, добавив его в вопрос. –  Geuis 29.04.2013 в 05:28
  • Вы имеете в виду, если строка html, которую вы хотите вставить, очень велика? –  gideon 29.04.2013 в 05:29
  • Я считаю, что ограничение размера для строк - это точно .... ждать его .... сколько памяти у вас есть? –  adeneo 29.04.2013 в 05:33
  • Этот вопрос имеет смысл, и это действительно хороший вопрос. Почему вниз и закрытие? –  Keavon 08.08.2013 в 20:00
  • Это очень правильный и хорошо сформулированный вопрос и не должен был быть закрыт! –  nauti 16.12.2014 в 10:16
Показать остальные комментарии

6 ответов

23

Вы можете сохранить HTML-блок в невидимом контейнере (например, <script> ) в своем HTML-коде, а затем использовать его innerHTML во время выполнения в JS

Например:

var div = document.createElement('div');
div.setAttribute('class', 'someClass');
div.innerHTML = document.getElementById('blockOfStuff').innerHTML;
document.getElementById('targetElement').appendChild(div);
.red {
    color: red
}
<script id="blockOfStuff" type="text/html">
    Here's some random text.
    <h1>Including HTML markup</h1>
    And quotes too, or as one man said, "These are quotes, but
    'these' are quotes too."
</script>

<div id="targetElement" class="red"></div>

Идея из этого ответа: JavaScript ЗДЕСЬ-ДОК или другой крупный план, механизм цитирования?

    
ответ дан Danny Beckett 29.04.2013 в 05:30
источник
  • Мне это нравится. Вид псевдотемпературной вещи. –  Geuis 29.04.2013 в 05:31
  • Можно ли помещать переменные в шаблон? –  Hello 29.04.2013 в 05:31
  • Я выдвигаю это для того, чтобы быть надлежащей мерзостью, а не тем, что большинство разработчиков когда-либо рассматривали, даже если оно действительно работает. –  adeneo 29.04.2013 в 05:41
  • @Hello Вы можете свернуть собственную систему шаблонов, например. в текстовом блоке HTML есть {PRICE} или {ADDRESS}, а затем после строки div.innerHTML = имеют что-то вроде div.innerHTML = div.innerHTML.replace (/ {ADDRESS} / g, '1 Some St, Liverpool, L1 2AB, UK ')); в качестве исходной основы. –  Danny Beckett 03.10.2016 в 19:27
15

Несмотря на неточную природу вопроса, вот мой интерпретирующий ответ.

var html = [
    '<div> A line</div>',
    '<div> Add more lines</div>',
    '<div> To the array as you need.</div>'
].join('');

var div = document.createElement('div');
    div.setAttribute('class', 'post block bc2');
    div.innerHTML = html;
    document.getElementById('posts').appendChild(div);
    
ответ дан Geuis 29.04.2013 в 05:33
источник
10

Если я правильно понимаю, вы ищете многострочное представление для удобочитаемости? Вы хотите что-то вроде строки здесь на других языках. Javascript может приблизиться к этому:

var x =
    "<div> \
    <span> \
    <p> \
    some text \
    </p> \
    </div>";
    
ответ дан Scott Jones 29.04.2013 в 05:33
источник
  • +1 избил меня –  Zeb Rawnsley 29.04.2013 в 05:34
  • Это хорошее решение –  David 30.03.2017 в 11:13
7

Template literals может решить вашу проблему, поскольку это позволит писать многострочные строки и функции интерполяции строк. Вы можете использовать переменные или выражение внутри строки (как указано ниже). Легко вставлять объемный html в дружественный для читателя способ.

Я изменил приведенный пример и посмотрю его ниже. Я не уверен, насколько браузер совместим с Template literals . Пожалуйста, ознакомьтесь с литералами шаблонов здесь.

var a = 1, b = 2;
var div = document.createElement('div');
div.setAttribute('class', 'post block bc2');
div.innerHTML = '
    <div class="parent">
        <div class="child">${a}</div>
        <div class="child">+</div>
        <div class="child">${b}</div>
        <div class="child">=</div>
        <div class="child">${a + b}</div>
    </div>
';
document.getElementById('posts').appendChild(div);
.parent {
  background-color: blue;
  display: flex;
  justify-content: center;
}
.post div {
  color: white;
  font-size: 2.5em;
  padding: 20px;
}
<div id="posts"></div>
    
ответ дан Vadakkumpadath 13.03.2017 в 09:11
источник
  • Обратите внимание, что литералы шаблонов доступны только в ES2015 и ES6, еще не широко поддерживаемых. –  Devon 11.04.2017 в 21:54
  • Спасибо! Образцы шаблонов работали для меня в Chrome 63.0.3239.59 (Official Build) бета-версии (64-разрядная версия). Perl имеет этот тип функции уже много лет, поэтому я был немного знаком, хотя я не знал технического термина в JavaScript. Я вставляю стили CSS в теге скрипта на мою страницу, которую я создаю динамически. –  Eric Hepperle - CodeSlayer2010 27.11.2017 в 17:16
2

Добавьте каждую строку кода в переменную, а затем напишите переменную во внутренний HTML. См. Ниже:

var div = document.createElement('div');
div.setAttribute('class', 'post block bc2');
var str = "First Line";
str += "Second Line";
str += "So on, all of your lines";
div.innerHTML = str;
document.getElementById('posts').appendChild(div);
    
ответ дан venki 29.04.2013 в 05:31
источник
0

Если вы используете тот же домен, вы можете создать отдельный HTML-файл, а затем импортировать его с помощью кода из этого ответа @Stano:

Ссылка

    
ответ дан raison 31.12.2016 в 13:44
источник
0

function searchKeyPress(e)
{
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById('btnUnblock').click();
        return false;
    }
    return true;
}
function createLink() {
var theId = document.getElementById('getId').value;
var YouTube = "youtube";
var YouTube2 = "https://youtu.be/";
var YouTube3 = "http://youtu.be/";
var YouTube4 = "youtu.be/";
if (theId.indexOf(YouTube) >= 0) {
var string = theId.split('=');
theId = string[1];
}
if (theId.indexOf(YouTube2) >= 0) {
var sString = theId.split('/');
theId = sString[3];
}
if (theId.indexOf(YouTube3) >= 0) {
var ssString = theId.split('/');
theId = ssString[3];
}
if (theId.indexOf(YouTube4) >= 0) {
var sssString = theId.split('/');
theId = sssString[3];
}
theId = theId.replace("&feature", '');
var newId = theId.match(/.{1,11}/g);
var customLink = 'http://www.youtube-nocookie.com/embed/' + newId[0] + '';
document.getElementById("player").src = "" + customLink;
document.getElementById("directLink").href = "" + customLink;
}
function buttonOne() {
document.getElementById("player").height = "480";
document.getElementById("player").width = "720";
}
function buttonTwo() {
document.getElementById("player").height = "720";
document.getElementById("player").width = "1280";
}
function buttonThree() {
document.getElementById("player").height = "1080";
document.getElementById("player").width = "1920";
}
<h1>Unblocker</h1>
<p>(If says video is blocked by VEVO, just visit the VEVO site
and watch it there at <a href=http://www.vevo.com> Vevo</a>.)
<strike><p>Type in your ID or paste one of these examples:<br /> x35P2wTX0zg<br />
fuDIevJyqbI
</p></strike>
  <input onkeypress="return searchKeyPress(event);" name="getId" type="text" id="getId" />
<button id="btnUnblock" onclick="createLink()">Unblock</button>
<p>Select player size:</p>
<p><button onclick="buttonOne()">720x480</button></p>    
<p><button onclick="buttonTwo()">1280x720</button></p>
<p><button onclick="buttonThree()">1920x1080</button></p>
<p>
<iframe id="player" height=480 width=720 src="" allowfullscreen></iframe>
</p>
<a id="directLink" href="">Direct link</a>
    
ответ дан kuewjds 31.05.2017 в 15:51
источник