Reputation: 207
I want to add li
element to ul
in this way
<li>
<div>
<span>Ad</span>
</div>
<div>
<span><a href="#">A title.</a></span>
<span>Some text here</span>
</div>
</li>
but through this code below
$(document).ready(function() {
$('#notify').click(function(e) {
$('#ul_addon').append(
$('<li><div>').append(
$('<span>Ad</span>'),
$('</div>'),
$('<div>').append(
$('<span><a href="#">A title.</a></span>'),
$('<span"></span>').html("New Text")
),
$('</div></li>')
)
);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul id="ul_addon">
<li>
<div>
<span>Ad</span>
</div>
<div>
<span><a href="#">A title.</a></span>
<span>Some text here</span>
</div>
</li>
</ul>
<button id="notify" type="button">Add</button>
I'm getting
<li>
<div></div>
<span>Ad</span>// this <span> is out of the <div> above
<div>
<span><a href="#">A title.</a></span>
<span>Some text here</span>
</div>
</li>
I want to have <span>
in <div>
element as
<div>
<span>Ad</span>
</div>
but don't have idea of getting the desired result.
Disclaimer : I'm newbie in JS world please don't mind if you find this stupid.
Upvotes: 1
Views: 606
Reputation: 2653
You need to append div to li instead of creating div like below
$('<li><div>')
// will create elements and it will look like <li><li><div></div>
Use the below code instead
$(document).ready(function() {
$('#notify').click(function(e) {
$('#ul_addon').append(
$('<li>').append(
$('<div><span>Ad</span></div>'),
$('<div>').append(
$('<span><a href="#">A title.</a></span>'),
$('<span"></span>').html("New Text")
),
$('</div></li>')
)
);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul id="ul_addon">
<li>
<div>
<span>Ad</span>
</div>
<div>
<span><a href="#">A title.</a></span>
<span>Some text here</span>
</div>
</li>
</ul>
<button id="notify" type="button">Add</button>
Upvotes: 1
Reputation: 15875
You need to understand how append and element creation in jQuery works. You don't need to use the end tag as a separate append. It does not work like an html string concatenation.
When you provide $('<div>')
, it is creating the html element <div></div>
.
When you use $('<li><div>')
, it will create <li><div></div></li>
, but if you chain append()
to this, then the next append will work on the parent element, li
. That is the reason, span is coming outside of the div.
$(document).ready(function() {
$('#notify').click(function(e) {
$('#ul_addon').append(
$('<li/>').append(
$('<div/>').append(
$('<span>Ad</span>')
),
$('<div/>').append(
$('<span><a href="#">A title.</a></span>'),
$('<span"></span>').html("New Text")
)
)
);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul id="ul_addon">
<li>
<div>
<span>Ad</span>
</div>
<div>
<span><a href="#">A title.</a></span>
<span>Some text here</span>
</div>
</li>
</ul>
<button id="notify" type="button">Add</button>
Upvotes: 1
Reputation: 1691
Why you don't want to keep it simple instead of using too much append
function?
$(document).ready(function() {
$('#notify').click(function(e){
$('#ul_addon').append('<li><div><span>Ad</span></div><div><span><a href="#">A title.</a></span><span>New Text</span></div></li>')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul id="ul_addon">
<li>
<div>
<span>Ad</span>
</div>
<div>
<span><a href="#">A title.</a></span>
<span>Some text here</span>
</div>
</li>
</ul>
<button id="notify" type="button">Add</button>
Upvotes: 1
Reputation: 337743
The issue is because you must create an entire element at a time - that is to say it's opening and closing tag (if it has one). You cannot use jQuery to insert only a closing tag.
To fix your code it would be simpler and perform better if you just used a single append:
$('#notify').click(function(e){
$('#ul_addon').append('<li><div><span>Ad</span></div><div><span><a href="#">A title.</a></span><span">New Text</span></div></li>'));
});
Upvotes: 1