Appending large block of html with append()

问题:

Im trying to append a large block of text using jquery's 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);



});

It doesn't seem to be working and after looking at the documentation for append(), I can't figure out why - any ideas? Is it the large amount of HTML that I am trying to append?

回答1:

Remove the line breaks.

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

回答2:

Javascript does not have multiline strings in the way you are writing them, you can't just open a string on one line, go down a few lines and then close it. (there are some ways of doing multi-line strings in JS, but they are kind of backwards).

How most people do it is something like this:

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

---

Note that the above answer is old and is no longer fully true. As ES6 becomes more common, and as more and more people transpile from ES6, we are more and more able to use template literals, which can be used as multiline strings:

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

回答3:

You should create a template in HTML that is hidden, then append its content HTML. For example:

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

jQuery:

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

Putting HTML in a JavaScript string is harder to read and search for, is error prone and your IDE will struggle to format it properly.

回答4:

It's my understanding that if you want to put your long string on multiple lines that it's more efficient to use an array of strings and join them.

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

回答5:

You can use a backslash at the end of each line.

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

var multiStr = "This is the first line \
This is the second line \
This is more...";

回答6:

Another alternative is Template literals with back-ticks:

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

It's a fairly new syntax and not supported in IE though.

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

回答7:

You can also clone the div with jQuery and then append the clone--way less messy.

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

回答8:

If line-breaks are an issue just use innerHTML, works in every browser since IE5:

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

Or, for collections:

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

回答9:

Javascript have the option to extend multiple lines/HTML section into a single line, for each line of HTML row add backslash() to identify that its continue line.

Note :-The only thing to consider while append lines are the single quote and double quote. If you start with the single quote, then use double quote in the internal string or vice-versa, otherwise, line is break and do not get the proper result.

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

Javascript syntax

 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 syntax

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

Or you can use a html template for this as mention in 3rd link via 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/

Appending multiple html elements using Jquery

spread html in multiple lines javascript

回答10:

just add like this $(#element).append(large_html),large_html in special character(``) and thank me later.

回答11:

By default, the HTML code containing wraps cannot be used with append/prependdirectly use 'or". However currently there are following methods to do that:

1. Use "+" to join HTML code pieces.

2. Use "\" to escape.

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

4. 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.):

We can see their differences clearly.