Currently have my page setup as:
<body id="some-id">
<div class="some-class">
</div>
<!-- some-class -->
</body>
I've tried using append and before, however, it's not quite doing what I want to do.
I'm trying to add a div with id inserted-div like this:
<body id="some-id">
<div id="inserted-div">
<div class="some-class">
</div>
<!-- some-class -->
</div>
<!-- inserted div -->
</body>
Each time I use something, for example: $('body').appendto("<div id='inserted-div'>"); it either won't insert or it will insert the </div> after the inserted <div> rather than placing the </div> before the closing body. Tried prepend and prependto but no luck.
You are looking for wrap method.
$('.some-class').wrap('<div id="inserted-div"></div')
$('body').prepend -- will add a div as the first child of the body.
$('body').append -- will add a div as the last child of the body.
But in your case you want the inserted-div as a wrapper for an already existing div.
Check Fiddle
To target just the first instance you can either use
$('.some-class').first() or $('.some-class:eq(0)')
If you want to wrap something around the entire body content, try:
$("body > *").wrapAll("<div id='inserted-div'/>");
If you want to wrap around the first DIV in the body:
$("body > div:eq(0)").wrap("<div id='inserted-div'/>");
Related
When I run init() and create an tinymce instance, I want to have some wrapping divs for styling purposes.
For example, imagine this is the initial DOM inside TinyMCE's iframe when the page starts up:
<html>
<body>
<div class="myWrapper">
<div class="myWrapperContainer">
--> User input area <--
</div>
</div>
</body>
</html>
Then when I get the user input content:
var userContent = tinymce.get("myTextarea").getContent();
I don't want the wrapper divs to be included in userContent. I just want the HTML inside the wrapper divs
How should I go about this?
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 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);
I want to add the class attribute on #new-post which is content of <script type="text/template" id="template"></script>
Below is my code which is able to find the content of 'template' but not able to add the class attribute.
$('#template').contents().find('#new-post').addClass('hello');
HTML
<script type="text/template" id="template">
<div id="new-post">
</div>
</script>
A script element contains CDATA, it cannot have child elements (< does not mean "start of tag" inside it (except when that tag is </script>)).
If you want to perform DOM manipulation of the contents of your template, then you must first parse the template into a DOM.
var template = $('#template').text();
var $template = $(template);
$template.addClass('hello');
alert($template.wrap('<div></div>').parent().html());
Why don't you render the template to the dom and then add the class.
Edit:
Please note that your code doesn't work even if the div is inside a normal html tag.
Please refer this fiddle:
http://jsfiddle.net/shyamchandranmec/R7g3S/
$('#foo').contents().find('#bar').addClass('fb');
$("#foo").find("#bar").addClass('foobar');
<div id="foo">
<div id="bar">foo bar</div>
</div>
The class fb wont be added to the div #bar.
Good Day.
Actually it is the wordpress site but i need the general solution using jquery(if feasible)
I trying to remove the tag next to end of the div.
See I am using the div as like here
<div class="one_third">
<p>This is for testing</p>
</div>
<br> <!--This one -->
<div class="one_third">
</div>
<br><!--This one -->
<div class="one_third">
</div>
<br><!--This one -->
In the above example i am using the class of one_third in a div inside this div i am using br tag too. But all i am want to remove the br tag which is in outside the div i mean in the end of the div in jquery.
</div>
<br>
I am not sure how to do this in jquery (Actually i try with wordpress disable wpautop is removing the br tag which is inside the div too (I don't want to remove the br tag inside the div only outside the div i mean end of the div )).
Any suggestion would be great :)
Thanks,
vicky
You should just place the HTML on one line.
wpautop inserts <br> on newlines, so placing the HTML code on one line avoids the entire issue.
<div class="one_third"><p>This is for testing</p></div><div class="one_third"></div><div class="one_third"></div>
The way you structure the markup is everything when wpautop is enabled.
It is the next sibling of the element with class one_third
$('.one_third').next('br').remove()
Demo: Fiddle
A non JavaScript solution would be a simple CSS sibling selector
.one_third + br {
display : none;
}
If you really want to use jQuery, you can use the same selector and use remove()
$(".one_third + br").remove();
You can use next() and remove() methods in jQuery for that
$(".one_third").next('br').remove();