使用JQuery添加两个DIV
Add couple DIVs with JQuery
我有一小段以短语"查找更多"结尾。
所以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>
对于多行字符串，您需要将'添加到每行的末尾：
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>';
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);
}
使用这种方式可以使代码更好地理解。
您可以执行以下操作：
function Convert(f) {
return f.toString().
replace(/^[^'/]+'/'*!?/, '').
replace(/'*'/[^'/]+$/, '');
}
var sample=Convert(function() {/* Add what ever you want here */})
https://jsfiddle.net/wrhjj04f/
这样你就不用担心引号、双引号、换行，只要把你的文字放在评论周围。
function Convert(f) {
return f.toString().
replace(/^[^'/]+'/'*!?/, '').
replace(/'*'/[^'/]+$/, '');
}
var sample=Convert(function() {/*
<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>
*/})
alert(sample);
function appendText(e) {
var strVar = "";
strVar += "<div class='"accomodations'">";
strVar += " <h3>Одноместный номер<'/h3>";
strVar += " <ul>";
strVar += " <li><img src='"img'/living1-1.jpg'" alt='"'"><'/li>";
strVar += " <li><img src='"img'/living1-2.jpg'" alt='"'"><'/li>";
strVar += " <li><img src='"img'/living1-3.jpg'" alt='"'"><'/li>";
strVar += " <'/ul> ";
strVar += " <p>Стоимость: 3000грн'/заезд<'/p>";
strVar += " <'/div>";
strVar += "";
strVar += " <div class='"accomodations'">";
strVar += " <h3>Двуместный номер<'/h3>";
strVar += " <ul>";
strVar += " <li><img src='"img'/living2-1.jpg'" alt='"'"><'/li>";
strVar += " <li><img src='"img'/living2-2.jpg'" alt='"'"><'/li>";
strVar += " <li><img src='"img'/living2-3.jpg'" alt='"'"><'/li>";
strVar += " <'/ul>";
strVar += " <p>Стоимость: 2500грн'/заезд<'/p>";
strVar += " <'/div>";
strVar += "";
strVar += " <div class='"accomodations'">";
strVar += " <h3>Трехместный номер<'/h3>";
strVar += " <ul>";
strVar += " <li><img src='"img'/living3-1.jpg'" alt='"'"><'/li>";
strVar += " <li><img src='"img'/living3-2.jpg'" alt='"'"><'/li>";
strVar += " <li><img src='"img'/living3-3.jpg'" alt='"'"><'/li>";
strVar += " <'/ul>";
strVar += " <p>Стоимость: 2000грн'/заезд<'/p>";
strVar += " <'/div>";
$("#livingbg").append(strVar);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" onClick="appendText();">Find out more...</a>
<div id="livingbg"><div>HTML JS转换助手：http://www.accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/
相关文章：
- JQuery合并了keyup和focusout两个函数
- 如何使用 node.js 比较两个 json 数组
- 为复选框javascript指定两个值
- 使用Javascript对象为具有两个背景图像的DIV设置样式时出现问题
- 同时换掉两个Div，换成另一个Div并保持循环一段固定的秒数
- 从iframe中选择具有相同类名的两个DIV中的第二个
- 使用两个或多个按钮在单个DIV中显示/隐藏和替换文本
- CSS/Javascript/Jquery:显示/隐藏 DIV 取决于单击的两个图像之一
- 将 JavaScript 结果打印到两个 DIV 而不是输入中
- 如何访问相同索引级别但位于不同父DIV中的两个元素
- 在两个Div之间切换
- 如何在Javascript中更改两个或多个Div样式
- 使用JQuery添加两个DIV
- 如何使同步两个 Div 滚动位置更平滑
- Javascript:两个Div ID's中的元素
- 基本Js函数缩放两个DIV's高度
- 在左右浮动两个Div后，下一个Div不能正确显示
- 如果选中两个特定复选框，则显示DIV;如果只选中一个复选框，显示不同的DIV
- 如何使用 Jquery 根据 ID 在两个 Div 之间附加一个 Div
- 使用jquery在两个Div's之间切换
