http://jsfiddle.net/uGyTB/
var s = $("<li><a href='index.html'><h3>hello</h3></a></li>");
alert(s.html());
Shows that the li element is not being created. Why?
The s is the <li> element. Its inner HTML is what you're fetching with .html().
You can prove this with: alert(s.get(0).tagName);
In an HTML document, .html() can be used to get the contents of any element. If the selector expression matches more than one element, only the first match will have its HTML content returned. Consider this code:
$('div.demo-container').html();
In order for the following 's content to be retrieved, it would have to be the first one with class="demo-container" in the document:
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
</div>
The result would look like this:
<div class="demo-box">Demonstration Box</div>
Related
i want to grab some html content and store in a variable. Then i want to clean that content by replacing all instances of <p><br></p> with empty string
This might help you
$('p').each(function(){
console.log($(this).text());
$(this).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Testing
</div>
<p>Test 1</p>
<p>Test 2</p>
For grab an HTML element, please use element tag, classname or id, here I've used element tag.
Instead of storing into a variable, I've done console.log.
For cleaning the content with empty string, you can use empty method in JavaScript like $(this).empty, but it will clear the content not element. So, I've used remove method to remove the element.
Hope this will help you.
I want to add html tag without ending tag like that <div class="bottom-widget"> . For that I use jQuery prepend() method but full tag was added by this !
Html Markup -
<div class="widget">
<h2>this is content 1</h2>
</div>
</div>
Javascript Code :
$(".widget").prepend('<div class="bottom-widget">');
Perhaps you are looking for wrapInner function.
And you code will be:
$(".wrapInner").wrapInner("<div class='bottom-widget'>");
I assume you need correct html so after this opening tag you will have another with closing one. For this reason you can use jQuery wrapInner function (http://api.jquery.com/wrapinner/)
First extract(or create) the element you want to be wrapped in your bottom-widget element, than create bottom-widget element and insert above-mentioned element into it.
$(".widget").prepend("<div class='bottom-widget'></div>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget">
<h2>this is content 1</h2>
</div>
I have a main document div to add some html element through variable "str"
<div id='documentDiv'></div>
I have a functionality which will add some html element to my #documentDiv.
var str="<div class='customElement'></div><a href='' onclick='append(event);'>append</a>"
And I have a functionality to append str to documentDiv as many time I want:
$('#documentDiv').append(str);
after appending two times I have the same structure appended twice inside my documentDiv element
<div id='documentDiv'>
<div class='customElement'></div><a href='' onclick='append(event);'>append</a> // want to append some text to respective .customElement div
<div class='customElement'></div><a href='' onclick='append(event);'>append</a>
</div>
My problem is with onclick ,i want to append something inside the respective div under customElement class.But with onClick ,it always gets appended to the first div.How can i get respective div element using jquery?
function append(event){
$('.customElement').append("some text");
}
Maybe this could help you:
Without a-tag:
$('.customElement').bind('click',function(){
$(this).append("some text");
});
or with a-tag:
$('.customElement a').bind('click',function(){
$(this).parent().append("some text");
});
I believe you want to use this.
function append(event){
$(this).append("some text");
}
Since you are adding your elements dynamically you should delegate the events by adding the on method to the parent element.
Here is an example.
function append(event){
$(this).prev().append("some text");
event.preventDevault();
}
$('#documentDiv').on('click', 'a', append);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id='documentDiv'>
<div class='customElement'></div><a href='#'>append</a>
<div class='customElement'></div><a href='#'>append</a>
</div>
I have this HTML:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
</div>
and want to add more divs after the strong element to result:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>
I am trying this:
var row_str = '<div>content here</div>';
$('#region_North_America div:last').html(row_str);
However, there is no change to the html. This is probably so since there is no div within the element selected.
I know that the js is making it to this code because I can print the content of row_str to the console.
So, how can I get to the end of that container element to add the new items?
Thx.
Try:
$("#region_North_America").append(row_str);
using append().
Or:
$("<div>content here</div>").appendTo("#region_North_America");
To create the element on the fly, and place it in the document.
Using the appendTo method.
Your code will just place html in the last div within #region_North_America. Use the append function.
$("div.region-list").append(row_str);
Say I have the following:
<div id="content">content</div>
And I want to insert some stuff before it ** (notice the unclosed div)**:
$("#content").before("<div>pre-pre-content</div><div>pre-content ");
And some then some more after ** (notice I am now closing the div)**:
$("#content").after(" post-content</div><div>post-post-content</div>");
My desired output is:
<div>pre-pre content</div>
<div>
pre-content <div id="content">content</div> post-content
</div>
<div>post-post content</div>
Instead, what I get is:
<div>pre-pre content</div>
<div>pre-content</div>
<div id="content">content</div>
<div>post-content</div>
<div>post-post content</div>
Because jQuery is automatically "correcting" the unclosed tags.
fiddle
Is there a way to use .wrap() to add different content before and after an element without automatically closing tags?
Note, I cannot do the following because of an unrelated restriction:
$("#content").html("<div>Content before " + $("#content).html() + " Content after</div>")
You can't insert partial or unclosed tags. Inserting elements in the DOM must insert only whole elements.
Your choices are:
Extract the element you want to be wrapped in your new element, insert the new container object and then put your original element into the container.
Manipulate the HTML of a parent directly (generally not recommended).
Use the jQuery .wrap() method which does the option in #1 for you. See here for more info on jQuery's .wrap().