I have an empty div on my page which I want to insert content into using jQuery.
For example:
<div class="container">
</div>
After inserting the first lot of content, I'd like my markup to look like this:
<div class="container">
<div class="inserted first">blah</div>
</div>
Round 2 of inserting content I'd like it to be:
<div class="container">
<div class="inserted second">blah</div>
<div class="inserted first">blah</div>
</div>
Round 3 of inserting content I'd like it to be:
<div class="container">
<div class="inserted third">blah</div>
<div class="inserted second">blah</div>
<div class="inserted first">blah</div>
</div>
How can I achieve this using jQuery?
So far I have tried $(data).appendTo($(".container").before(".inserted")); but that doesn't work.
Update: Thanks for all of your answers. Pretty much all answers so far work. I had to pick one so went for the oldest first. Thanks again to everyone for your help.
You want to insert content before the current child. What you need is the prepend() function:
$(".container").prepend(data);
// assuming data is <div class="inserted second">blah</div>
Use .prependTo() instead of .appendTo().
Use prepend instead of append. Assuming data contains the HTML of
<div class="inserted x">blah</div>
You can use prepend():
$(".container").prepend(data);
Or prependTo():
$(data).prependTo(".container");
Try this:
$('.container').prepend(DOM object or html string);
For example:
$('.container').prepend('<div class="inserted third">blah</div>');
Related
I have this code below, it also has image URL and many more which I didn't post buti want to get the whole exact div tag exactly it is trimming all the other div tags. like i want "col-sm-8" div tag exact it is from the whole function
<html><body><div class='col-sm-8'>
<div class='MainMessageFormat FixedMarginForMessage'>
<pre><p>test message</p></pre>
</div></div>
<div class='col'>
<div class='MainMessageFormat'>
<pre><p>test message</p></pre>
</div></div>
<div class='row'>
<div class='MainMessage'>
<pre><p>test message</p></pre>
</div></div>
</body></html>
You can use innerText property of javascript like below:
console.log(document.querySelector('.MainMessageFormat.FixedMarginForMessage').innerText);
<html><body><div class='col-sm-8'>
<div class='MainMessageFormat FixedMarginForMessage'>
<pre><p>test message</p></pre>
</div></div>
</body></html>
is it possible by using JavaScript to open any tag, for example div#js and insert closing tag in any place I want, like on example below?
<div id="first"></div>
<div id="js">
<div id="second"></div>
<div id="third"></div>
</div>
<div id="fourth"></div>
If you start with:
<div id="first">1</div>
<div id="second">2</div>
<div id="third">3</div>
<div id="fourth">4</div>
and need to get this structure:
<div id="first">1</div>
<div id="js">
<div id="second">2</div>
<div id="third">3</div>
</div>
<div id="fourth">4</div>
the you can use $('#second').wrap('<div id="js"></div>').after($('#third')).
See demo below:
$('#second').wrap('<div id="js"></div>').after($('#third'));
#js {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">1</div>
<div id="second">2</div>
<div id="third">3</div>
<div id="fourth">4</div>
As you've tagged your code jQuery, I'll answer it in that sense. If you're programmatically inserting a div element into the page with juery, like this:
var bodyEl = $("body");
var myJsEl = $("<div>").attr("id", "js");
bodyEl.append(myJsEl);
... As has been noted, the $("<div>") code is the functional equivalent of document.createElement("div"), which creates the code block, both opening and closing the DOM element. Thus, when I create the element by either approach, programmatically speaking, the close is not something I can control.
That said, in the "bad old days" of document.write(), we did have the option of hard-coding opening tags and neglecting to include closing tags. DON'T DO THIS! It's deprecated, it's bad form and it can create serious coding issues later.
I can't make TinySort put elements with a missing attribute below the sorted elements. Options like "place" and "emptyEnd" don't change the order at all.
Please take a look:
https://jsfiddle.net/dm8cz4ra/1/
If I pick only the elements with the attribute using nodeList = $('#list > div[position]') they always land at the end.
I think it is working, but you need to inform TinySort that a position is existing. So instead of:
<div id="list">
<div position="0">0</div>
<div position="-1">-1</div>
<div position="1">1</div>
<div>NULL</div>
</div>
Use
<div id="list">
<div position="0">0</div>
<div position="-1">-1</div>
<div position="1">1</div>
<div position="">NULL</div>
</div>
Fiddle
I have a html structure like below:
<div class="element1>
</div>
I want to create another div.element right after div.element1 so I use element2.appendTo("div.element1") but it's being created like below:
<div class="element1>
<div class="element2">
</div>
</div>
What I really what to be done is like below:
<div class="element1>
</div>
<div class="element2">
</div>
How this can be done?
You should use after to insert elements like you want.
Try it:
$('.element1').after(element2);
Regards.
use insertAfter() :-
$(".element2").insertAfter($(".element1"));
With jQuery you can user after or insert to the parent:
$('#element1').after('#element2')
$('#element1').parent().append('#element2')
Basically what I have is this:
<body>
<div class="class1">
</div>
<div class="class2">
</div>
<div class="class3">
</div>
...
</body>
I have no idea why the site creator used classes instead of IDs (they're unique), but it doesn't really matter as I'm writing a GM script and so getElementsByClassName('')[0] effectively does the same thing.
How can I insert an element between the first and second div?
Create your own insertAfter function
you can use JQuery it very simple
$(".class1").after( document.createTextNode("Hello") );