Вопрос по html, jquery, javascript – Добавление большого блока html с append ()

19

Я пытаюсь добавить большой блок текста с помощью jquery 'append ().

$('#add_contact_btn').click(function(event) {
    event.preventDefault();

    var large = '<div class="accordian_container"><a href="#" class="accordian_trigger"><h4>Co-Borrower Information</h4></a><hr/><div class="accordian_item" id="accord_item_2"><label> First Name</label><br/><input type="text"/><br/><label>Middle Name</label><br/>
            <input type="text"/><br/>
            <label>Last Name</label><br/>
            <input type="text" /><br/>
            <label>Home Number</label><br/>
            <input type="text"/><br>
            <label>Work Number</label><br/>
            <input type="text"/><br>
            <label>Cell Number</label><br/>
            <input type="text"/><br>
            </div>
            </div>';

    $('#accordion_container').append(large);



});

Кажется, он не работает, и после просмотра документации на append () я не могу понять, почему - какие-то идеи? Это большой объем HTML, который я пытаюсь добавить?

есть ли конкретное сообщение об ошибке на консоли? David
У вас есть элемент с идентификатором "accordian_container"? ? nunespascal

Ваш Ответ

11   ответов
0

large_html), large_html в специальном символе (``) и спасибо мне позже.

1

одну строку, для каждой строки добавления строки HTMLbackslash() определить, что это продолжение линии.

Note : - Единственное, что следует учитывать при добавлении строк, это одинарные и двойные кавычки. Если вы начинаете с одинарной кавычки, то используйте двойную кавычку во внутренней строке или наоборот, в противном случае строка разрывается и не дает правильного результата.

$(element).append('<div class="content"><div class="left"></div><div class="right"></div></div>');

Синтаксис Javascript

 var str = ' <div class="content"> \
<div class="left"> \
</div> \
<div class="right"> \
</div> \
</div> ';

 document.getElementsByName(str).html(str);
 //or
 document.getElementsById(str).html(str);

Синтаксис Jquery

 $(element).append(' \
  <div class="content"> \
    <div class="left"> \
    </div> \
    <div class="right"> \
    </div> \
  </div> \
');

Or Вы можете использовать HTML-шаблон для этого, как упоминание в 3-й ссылке через JQuery

$("#div").load("/html_template.html");

http://www.no-margin-for-errors.com/blog/2010/06/17/javascript-tip-of-the-day-extending-a-string-across-multiple-lines/

Добавление нескольких HTML-элементов с использованием Jquery

распространять HTML в несколько строк JavaScript

0

просто используйте innerHTML, он работает в любом браузере начиная с IE5:

$('#accordion_container')[0].innerHTML += large;​

Или для коллекций:

$('.accordion_container').forEach(function () {
    this.innerHTML += large;​
});
7

http://davidwalsh.name/multiline-javascript-strings

var multiStr = "This is the first line \
This is the second line \
This is more...";
Error: User Rate Limit Exceededjsfiddle.net/49gpqwuaError: User Rate Limit Exceeded
1

а затем добавить клон, что делает его менее беспорядочным.

var accordionClone = $('.accordion_container').clone();
$('#accordion_container').append(accordionClone);
22

http://jsfiddle.net/DmERt/

var large = '<div class="accordian_container"><a href="#" class="accordian_trigger"><h4>Co-Borrower Information</h4></a><hr/><div class="accordian_item" id="accord_item_2"><label> First Name</label><br/><input type="text"/><br/><label>Middle Name</label><br/><input type="text"/><br/><label>Last Name</label><br/><input type="text" /><br/><label>Home Number</label><br/><input type="text"/><br><label>Work Number</label><br/><input type="text"/><br><label>Cell Number</label><br/><input type="text"/><br></div></div>';

$('#accordion_container').append(large);​
Error: User Rate Limit Exceeded Thomas
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
$('#accordion_container').append(large);Error: User Rate Limit Exceededaccordion_container)
6

Template literals сback-ticks:

var large = `some long text here
some long text here
some long text here`;

Это довольно новый синтаксис и не поддерживается в IE.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededtemplate literalsError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
26

который скрыт, а затем добавить его содержимое HTML. Например:

<div class="hide" id="template">
  <b>Some HTML</b>
</div>

JQuery:

$("#container").append($("#template").html());

Поместить HTML-код в строку JavaScript сложнее для чтения и поиска, он подвержен ошибкам, и ваша IDE будет пытаться правильно отформатировать его.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
0

append/prependнапрямую использовать'or", Однако в настоящее время есть следующие способы сделать это:

Use "+" to join HTML code pieces.

Use "\" to escape.

Use "`" (back-tick, grave accent), do not need any extra operations. This method is supported from ES2015/ES6 (Template literals).

Add a hidden tag containing the same HTML code you need, e.g. <p id="foo" style="display:none;">, then use.append($('#foo').html());.

Now post some use scenarios to the first three methods metioned above (just run them in the console of Chrome browser.): enter image description here

Мы ясно видим их различия.

26

в котором вы их пишете, вы не можете просто открыть строку в одну строку, перейти вниз на несколько строк и затем закрыть ее. (в JS есть несколько способов создания многострочных строк, но они отстают).

Как большинство людей делают это примерно так:

var myString = '<p>Line One</p>' +
'<p>Line Two</p>' +
'<p>Line Three</p>';

Note что приведенный выше ответ является старым и больше не является полностью верным. По мере того как ES6 становится все более распространенным, и по мере того, как все больше и больше людей переходят от ES6, мы все больше и больше можем использовать литералы шаблонов, которые можно использовать в качестве многострочных строк:

var myString = `<p>Line One</p>
<p>Line Two</p>
<p>Line Three</p>`;
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded'it\'s'Error: User Rate Limit Exceeded
8

если вы хотите поместить свою длинную строку в несколько строк, более эффективно использовать массив строк и соединять их.

var bigString = [
    'some long text here',
    'more long text here',
    '...'
];
$('#accordion_container').append(bigString.join(''));

Похожие вопросы