We Keep Coding

Add custom html after the last child of my list using javascript

I'm trying to use javascript to add a custom div after my last child of a unordered list, the result should basically look like this.
<ul class="mylist">
<li> content </li>
<li> content </li>
<li> content </li>
<li> content </li>
<div>custom div</div>
<ul>
I am getting this far, but don't know if it's close to be the right solution.
I cant get it to work
$( document ).ready(function() {
document.getElementByClassName("myList").lastChild.innerHTML = "<h1>test</h1>";
}

You can use jquery and append the div though this is not a valid markup.append() dynamically add child element.
$(function(){
//this is valid child of <ul>
$('.mylist').append('<li>custom content 1</li><li>custom content 2</li>');
//this is invalid markup but you asked for though
$('.mylist').append('<div> custom content 1 </div><div> custom content 2</div>');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mylist">
<li> content </li>
<li> content </li>
<li> content </li>
<li> content </li>
<ul>

Native DOM implementation using querySelector and insertAdjacentHTML methods
document.querySelector('.mylist > li:last-child')
.insertAdjacentHTML('afterend', '<li><h1>Test</h1></li>')
<ul class="mylist">
<li> content </li>
<li> content </li>
<li> content </li>
<li> content </li>
</ul>

a div as a child of ul is not valid in html for you to insert the div you need to first add list then have the div inside of the list something like this
<ul class="mylist">
<li> content </li>
<li> content </li>
<li> content </li>
<li> content </li>
<li>
<div>custom div</div>
</li>
<ul>
since yyour list child is a list then you script that could either append hence replacing <div>custom div</div> with <h1>test</h1> should be something like this since we are appending inside of the last li tag
$( document ).ready(function() {
document.getElementByClassName("myList")
.lastChild.innerHTML = "<h1>test</h1>";
}
that way your markup is valid and and test is rendered on browser

How to find only first entry in dom

I have some dom like
.....
<ul>*
<li>
<ul>
Sone html here
</ul>
</li>
</ul>
.....
<ul>*
<li>
<ul>
<li>
<ul>
Some html here
</ul>
</li>
</ul>
</li>
</ul>
......
How can I find the first <ul> elements (marked by *) using jQuery?
I used something like
$('body ul:first-child')
but this returns only one element

You need to use immediate child selector to target elements that are immediate child of their parent:
$('body > ul')

I don't know why few person recomended to delete answer bnu right answer is
$('ul:not(ul ul)')
we need to exclude ul included in ul in this case we get ul only on top level (marked by *)

remove all <a> tags with an class in an html page using jquery

How can I remove all occurrences of tags with a particular class only and not the contents inside in it of an html page using jquery or javascript?
For example the following must be converted
<a class="ab">
<ol>
<a class="ab">
<li><a class="ab">
abcde</a>
</li>
<li>
<a class="ab">
12354
</a>
</li>
</a>
</ol>
</a>
into
<ol>
<li>
abcde
</li>
<li>
12354
</li>
</ol>
I want to remove all a tags with class= "ab" with retaining the elements and contents inside it

Use .replaceWith() , it's brief and works perfectly as you want :[DEMO HERE]
$("a.ab").replaceWith(function() { return this.innerHTML; });
OUTPUT:
<ol>
<li>
abcde
</li>
<li>
12354
</li>
</ol>

You can try replaceWith
jQuery('.ab').each(function(){
jQuery(this).replaceWith(jQuery(this).html());
});
Demo
http://jsfiddle.net/SHReE/
jQuery Api
http://api.jquery.com/replaceWith/

What about unwrap?
$('a.ab').contents().unwrap();
contents() - Get the children of each element in the set of matched elements, including text and comment nodes.
unwrap() - Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.

try this
$('.ab').each(function() {
var val = $(this).html();
$(this).parent().html(val);
$(this).remove();
});

You could use:
$("a .ab").each(function() {
$(this).remove();
});

Cufon (jQuery?) selector not to select children

I have a very basic and usual list menu with a submenu:
<ul>
<li>Home</li>
<li>
About
<ul id="sub-menu">
<li>Child1</li>
<li>Child2</li>
</ul>
</li>
</ul>
And then I have a Cufon selector applying a font to the menu:
Cufon.replace('ul li a');
Is there any way to select only the first level of the menu and disregard the other? Right now both levels get the font, but I would like to use something else for submenu.
I am very much a beginner with Javascript, Cufon and jQuery, I tried using child selectors but I had no luck with that. How can I achieve this?

It appears that your JavaScript library uses CSS-style selectors; you can just use
<ul class='containingMenu'>
<li>Home</li>
<li>
About
<ul id="sub-menu">
<li>Child1</li>
<li>Child2</li>
</ul>
</li>
</ul>
with this selector
ul.containingMenu > li > a
where the > causes the selector to apply only to a's that are direct children of li's that are direct children of the ul.containingMenu.
↪ See this example in action at JSFiddle.

Finding previous and next li with Javascript

I have an uncertain amount of nested ul and li tags like:
<ul>
<li>5
<ul>
<li>2
<ul>
<li>1
</li>
<li>4
<ul>
<li>3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>7
<ul>
<li>9
<ul>
<li>14
<li>
</ul>
<li>11
</li>
</ul>
</li>
</ul>
I'm using Kendo ui treeview and it returns me the element where the l was dropped (it might be a element inside the li because I have some spans in each one).
What I need is to know the previous and next li through DOM and Javascript to save the new order of elements.
Can anyone help please?

You didn't specify which event you were using, but it should be "dragend". That way you should be able to detect the parent li and then just get all of it's children to reorder.
Check out this fiddle here. Is this closer to what you are looking for?
http://jsfiddle.net/burkeholland/CrRUz/

Using jQuery:
var parentLi = $(e).closest('li');
var previousLi = parentLi.prev()
var nextLi = parentLi.next();
Where e is the element receiving the drop.