Is there a way to place an html element just before my body end tag, without knowing which tags are before it? In this scenario i don't know that there is a ul list at the end.
Note: I can't use jquery to solve this.
e.g.
<body>
<p id="test">Hello</p>
<script>
document.getElementById("test").MOVE_BEFORE_BODY(); //<-- something like this
</script>
<ul>
<li>...</li>
<li>some random stuff</li>
</ul>
<!-- element should be moved to this position -->
</body>
someElement.appendChild will move an element to the end of someElement.
document.body.appendChild(
document.getElementById("test")
);
Use document.body.appendChild(yourElement)
Related
I'm trying to copy the contents of a DIV and insert a heading before the copy. However, the heading gets inserted at the wrong point.
var reference = $('#reference').clone().contents();
reference.prepend('<h1>Heading</h1>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="reference">
<ul>
<li></li>
</ul>
</div>
I want the heading to go before the <ul> but instead it gets inserted after before the first li.
So it looks like this:
<div id="copy">
<ul>
<h1>Heading</h1>
<li></li>
</ul>
</div>
Instead of this (what I want):
<div id="copy">
<h1>Heading</h1>
<ul>
<li></li>
</ul>
</div>
This is probably a really basic question but a few hours of trying prependTo(), before(), insertBefore() and searching online have not gotten me any closer. Thanks :)
Firstly remove contents() as you want to clone the whole element, not its children. Secondly, create the h1 tag, then use prependTo() to place it at the desired location in the cloned element.
Also note that your current code results in duplicate id attributes in the DOM, which is invalid. I'd suggest making the #reference id in to a class instead. Try this:
var reference = $('.reference:first').clone();
$('<h1>Heading</h1>').prependTo(reference);
$('body').append(reference);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reference">
<ul>
<li>Foo</li>
</ul>
</div>
Use it like this I have tried and It is working fine.
$('#reference').clone().contents().parent().prepend('<h1>Heading</h1>')
Following is my HTML structure which includes script tag
<ul id="list">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
<script type='text/javascript' src="main.js"></script>
<li class="item4">Item 4</li>
</ul>
Following is my JS code to get the length of direct child
var directChild = document.getElementById('list').children;
console.log(directChild.length); // this gives me length as 5
If you're interested in reading the count of the <li> child elements which are fathered by the element with id list I guess this is as close as you'd get to doing it w/ vanilla javascript...
var liElements = document.getElementById('list').getElementsByTagName("li");
alert(liElements.length);
However I'd also strongly advise you (as many others have already advised you) to look into using jquery for DOM manipulation instead of plain old javascript...
If you want all the child elements WITHOUT any <script> tag elements this could come in handy (it doesn't filter <script> tags but it comes close by filtering out tags with the specific type attribute text/javascript which is used only by <script> tags ;))
var nodes = document.querySelectorAll('#list > *:not([type="text/javascript"])');
alert(nodes.length);
Let me know if this helps...
Just move your script tag out of the <ul>. It will make your code valid, more sensible, and will make it do what you want.
I acknowledge that if you are so insistent as to leave a <script> tag in a <ul> then the comment from #Pekka will solve your problem.
Because script tag is #list's child element.
I need to wrap the elements inside of the body by <div id="wrap"> dynamically, using jQuery/JavaScript. The final result has to be:
<body>
<div id="wrap">
<!-- open div #wrap here -->
<div id="nav">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
<div id="main">....</div>
</div>
<!-- close div #wrap here, before close body tag -->
</body>
Should I create the div and after add the content that already exists inside body? How can I do it?
Thank you!
First you would want to grab the current HTML and store it in a variable, then the use of the .html()method will do wonders:
$(function(){
var bod = $("body"), current_html = bod.html();
bod.html("<div id=\"wrap\">" + current_html + "</div>");
});
Use .wrapAll() method, as below:
$('body').children().wrapAll("<div id='wrap'>");
JSBin Demo
$(document.body).html("<div id='wrap'>...</div>")
wrapAll should produce several div tags. I would have used wrapInner instead.
$('body').wrapInner('<div id="wrap">');
I've got a code you see below:
<div class="categories-list">
Description One
<ul>
<li>
<span>CATEGORY1</span>
<span>CATEGORY2</span>
<span>CATEGORY3</span>
</li>
</ul>
</div>
What I want to do is to select the text "Description one" which has no tag around it and wrap it with the tag (specifically h2) using jQuery, so the final code would look like:
<div class="categories-list">
<h2>Description One</h2>
<ul>
<li>
<span>CATEGORY1</span>
<span>CATEGORY2</span>
<span>CATEGORY3</span>
</li>
</ul>
</div>
I know that I can use wrap() function to get the second thing done. The selecting part is the one I've got the problem with.
Simple wrap can't do the job until you walk over the contents of the element:
$(".categories-list").contents().first().wrap("<h2 />");
DEMO: http://jsfiddle.net/MDhvY/
I have a div tag, which contains a div tag, which contains a ul tag which then contains many li tags. On of these li tags contains an anchor element, which when clicked causes the outermost div to hide.
for example
<div class="object" id="123">
<div>
<ul>
<li></li>
<li>hide outermost div and its child elements</li>
</ul>
</div>
</div>
<div class="object" id="124">
<div>
<ul>
<li></li>
<li>hide outermost div and its child elements</li>
</ul>
</div>
</div>
on clicking the anchor tag the outermost div must hide along with its child elements.
I reckon i need to use parentNode repeatedly.. but is there a simpler way to directly access the outer most div and hence its id. Help would be appreciated.
Your question is fairly unclear. It almost sounds like you are looking for a generic way of accessing the "outer div". If that is the case, it doesn't make sense that you have ids on both your anchor and your outer div. If there's only ever going to be one "outer div" and one anchor to hide it, all you need is:
$('#hide').click(function(){
$('#123').hide();
});
If you want a generic way of doing this, you should add classes to both:
<div class="outerDiv" id="123">
<div>
<ul>
<li></li>
<li>hide outermost div and its child elements</li>
</ul>
</div>
</div>
and:
$('.hider').click(function(){
$(this).closest('.outerDiv').hide();
});