javascript - 使用 JQuery 添加几个 DIV

Question

我有一个短段落以“了解更多”短语结尾。

所以onclick我想向该div添加一些带有图片的文本。

这就是我正在做的事情，这是我的 JS:

function appendText() {
    var txt = '<div class="accomodations">
                    <h3>Одноместный номер</h3>
                    <ul>
                        <li><img src="img/living1-1.jpg" alt=""></li>
                        <li><img src="img/living1-2.jpg" alt=""></li>
                        <li><img src="img/living1-3.jpg" alt=""></li>
                    </ul>   
                    <p>Стоимость: 3000грн/заезд</p>
                </div>

                <div class="accomodations">
                    <h3>Двуместный номер</h3>
                    <ul>
                        <li><img src="img/living2-1.jpg" alt=""></li>
                        <li><img src="img/living2-2.jpg" alt=""></li>
                        <li><img src="img/living2-3.jpg" alt=""></li>
                    </ul>
                    <p>Стоимость: 2500грн/заезд</p>
                </div>

                <div class="accomodations">
                    <h3>Трехместный номер</h3>
                    <ul>
                        <li><img src="img/living3-1.jpg" alt=""></li>
                        <li><img src="img/living3-2.jpg" alt=""></li>
                        <li><img src="img/living3-3.jpg" alt=""></li>
                    </ul>
                    <p>Стоимость: 2000грн/заезд</p>
                </div>'';'

    $("#livingbg").append(txt);
}

这是我的 HTML:

<a href="" onclick="appendText()">Find out more...</a>

Answer 1

对于多行字符串，您需要将 \ 添加到每行末尾:

var txt = '<div class="accomodations">\
                <h3>Одноместный номер</h3>\
                <ul>\
                    <li><img src="img/living1-1.jpg" alt=""></li>\
                    <li><img src="img/living1-2.jpg" alt=""></li>\
                    <li><img src="img/living1-3.jpg" alt=""></li>\
                </ul>   \
                <p>Стоимость: 3000грн/заезд</p>\
            </div>\
\
            <div class="accomodations">\
                <h3>Двуместный номер</h3>\
                <ul>\
                    <li><img src="img/living2-1.jpg" alt=""></li>\
                    <li><img src="img/living2-2.jpg" alt=""></li>\
                    <li><img src="img/living2-3.jpg" alt=""></li>\
                </ul>\
                <p>Стоимость: 2500грн/заезд</p>\
            </div>\
\
            <div class="accomodations">\
                <h3>Трехместный номер</h3>\
                <ul>\
                    <li><img src="img/living3-1.jpg" alt=""></li>\
                    <li><img src="img/living3-2.jpg" alt=""></li>\
                    <li><img src="img/living3-3.jpg" alt=""></li>\
                </ul>\
                <p>Стоимость: 2000грн/заезд</p>\
            </div>';