用append()附加大块的html

2021/01/20 00:11 · jquery ·  · 0评论

我试图使用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吗?

删除换行符。

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

现代答案

随着ES6(及更高版本)变得越来越普遍,以及越来越多的人从ES6进行转译,我们越来越能够使用模板文字,这些文字可以用作多行字符串:

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

2012年原始答案(ES5)

Javascript编写方式没有多行字符串,不能只在一行中打开一个字符串,向下一行几行然后将其关闭。(在JS中有一些处理多行字符串的方法,但是有些倒退)。

大多数人的操作方式如下:

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

您应该使用隐藏的HTML创建模板,然后附加其内容HTML。例如:

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

jQuery的:

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

将HTML放在JavaScript字符串中较难阅读和搜索,容易出错,并且您的IDE将难以正确设置其格式。


更新2019

template为此目的而创建标签:https : //developer.mozilla.org/en-US/docs/Web/HTML/Element/template

template甚至允许标记包含其他地方无效的HTML,例如td之外的标记table

据我了解,如果要将长字符串放在多行上,则使用字符串数组并将其连接起来会更有效。

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

您可以在每行的末尾使用反斜杠。

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

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

另一种选择是带有反引号的Template文字

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

这是一种相当新的语法,但IE中不支持。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Template_literals

Javascript可以选择将多行/ HTML部分扩展为一行,对于HTML行的每一行,添加backslash()以标识其继续行。

注意:-附加行时唯一要考虑的是单引号和双引号。如果您以单引号开头,则在内部字符串中使用双引号,反之亦然,否则,行将中断并且无法获得正确的结果。

$(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> \
');

或者
您可以通过jQuery在第3个链接中使用html模板

$("#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/

使用Jquery附加多个html元素

在多行javascript中传播html

您还可以使用jQuery克隆div,然后附加克隆,以减少混乱。

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

只需像这样添加$(#element).append(large_html),large_html特殊字符(``),然后谢谢我。

默认情况下,包含自动换行的HTML代码不能与append/prepend直接使用一起使用'or"但是,目前有以下方法可以做到这一点:

  1. 使用“ +”加入HTML代码段。

  2. 使用“ \”转义。

  3. 使用“`”(勾号,重音符号),不需要任何其他操作。ES2015 / ES6模板文字支持此方法

  4. 添加一个tag包含所需HTML代码的隐藏文件<p id="foo" style="display:none;">,然后使用.append($('#foo').html());

    现在将一些使用场景发布到first three methods上面提到的场景中(只需在Chrome浏览器的控制台中运行它们即可):
    在此处输入图片说明

我们可以清楚地看到它们之间的差异。

如果换行符是一个问题,则只需使用innerHTML,它就适用于IE5以后的所有浏览器:

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

或者,对于收藏:

$('.accordion_container').forEach(function () {
    this.innerHTML += large;​
});
本文地址:http://jquery.askforanswer.com/yongappendfujiadakuaidehtml.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!