This is code of HTML.
This code is working in Mozilla but not working in Chrome.
<!DOCTYPE html>
<html>
<body>
<ul id="myList1">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ul id="myList2">
<li>Water</li>
<li>
<input id="files" name="files" type="file" />
</li>
</ul>
<p>Click the button to copy an item from one list to another.</p>
<button onclick="myFunction()">Try it</button>
<p>Try changing the <em>deep</em> parameter to false, and only an empty LI element will be cloned.</p>
<script>
function myFunction()
{
var itm = document.getElementById("myList2").lastChild;
var cln = itm.cloneNode(true);
document.getElementById("myList1").appendChild(cln);
}
</script>
</body>
</html>
Can You Please Precise your Question a bit more clear
lastChild includes all node children, including text-nodes. So what you got was not an element but a text-node with the newline and space between </li> and </ul>.
So what you want is the last child Element, not the last child Node.
Which you can do with
function myFunction()
{
var itm = document.getElementById("myList2").lastElementChild;
var cln = itm.cloneNode(true);
document.getElementById("myList1").appendChild(cln);
}
Related
I need to take the text "UNIT01". How I can do this using JQuery or JS?
`<div id="unit">
<ul class="choices">
<li>
<div>UNIT01</div>
</li>
<li>
<div>UNIT02</div>
</li>
</ul>
</div>`
$( document ).ready(function() {
var txt = $('.choices li:first-child>div').text()
console.log( txt );});
This code will access the text inside that div by accessing the div through its parent elements.
var unit = document.getElementById("unit");
var list = unit.getElementsByTagName("ul")[0];
var items = list.getElementsByTagName("li")[0];
var div = items.getElementsByTagName("div")[0];
var text = div.innerHTML;
alert(text);
<div id="unit">
<ul class="choices">
<li>
<div>UNIT01</div>
</li>
<li>
<div>UNIT02</div>
</li>
</ul>
</div>
I am currently am trying to get this below function working. I would like to use a relative path in order to add an active class for my different ul li a tag in my dom. The problem I am facing is that despite splitting the URL, it doesn't appear to be checking and comparing right part of the url and href. here is an of my HTML structure:
<div class="parent-bar"> <ul> <li>
<a class="parent-link" href="/dummy-parent-2/">
<div class="wrap">
<span class="text">Parent page 2
</span>
</div> </a> <div id="child-menu-1" class="child-menu">
<ul>
<li>
<a href="/dummy-parent-2/dummy-child-1/" class="child-links">
<div class="wrap">
<span class="text">child page 1
</span>
</div>
</a>
</li>
</ul> </div> </li> </ul> </div>
and here is the jQuery supposed to be tracking the url:
jQuery(function($) {
var path = window.location.href;
path = path.split("/");
$(".parent-link").each(function() {
if (this.href === path[3]) {
$(this).addClass('active');
}
});
if($('.parent-link').hasClass('active')){
$('.child-links').addClass('active');
}
});
The console is not showing any errors. I can see the active class is not added. The reason I am looking to do this is to allow the children of the parent items to be active as well. I will apply the same principle to the children to track the parent's respective URL. if that makes sense.
Any help or insight would be much appreciated.
I have a code of TOC on my website it seems to be very great for users.
But when I integrate it into my indiantechhunter's it appears in open condition i.e in show condition, I want it to be in Hided condition.
How can I do It?
The code is here ↓
<html>
<head>
...HEAD Stuff...
<script>
var hideTOC = function(){
var hideThese = document.getElementsByClassName("toc_list");
for (var i = 0; i < hideThese.length; i++){
hideThese[i].style.display = "none";
}
document.getElementById("showTOC").style.display = "";
}
var showTOC = function(){
var showThese = document.getElementsByClassName("toc_list");
for (var i = 0; i < showThese.length; i++){
showThese[i].style.display = "";
}
document.getElementById("showTOC").style.display = "none";
}
</script>
</head>
<body>
...BODY Stuff...
<div id="toc_container">
<p class="toc_title">Contents [<a href='javascript:void(null)' class='toc_list' onclick='hideTOC()'>hide</a><a href='javascript:void(null)' id='showTOC' style="display:none;" onclick='showTOC()'>show</a>]</p>
<ul class="toc_list">
<li>1 First Point Header
<ul>
<li>1.1 First Sub Point 1</li>
<li>1.2 First Sub Point 2</li>
</ul>
</li>
<li>2 Second Point Header</li>
<li>3 Third Point Header</li>
</ul>
</div>
...BODY Stuff...
</body>
</html>
I want to show it as shown in the following photo when a user opens page containing TOC.
i have html code and i need to get value from <h> element that is placed in a <li> element so i tried the following code
<li class="product-price">
<h3> 7 406,10 dollar </h3>
<!-- close price -->
</li>
<script>
function myFunction() {
var x = document.getElementsByClassName("product-price");
alert(x.item(0).innerHTML);
}
</script>
but i am getting [https://i.stack.imgur.com/tCt1X.png]
as long as h3 is without a class or id so u can get it from it's parent using queryselector,
try the snippet =)
window.addEventListener('load', function() {
var txt = document.querySelector('.product-price :nth-child(1)').innerHTML;
console.log(txt);
});
<li class="product-price">
<h3> 7 406,10 dollar </h3>
<!-- close price -->
</li>
<li >
<h3 class="product-price"> 7 406,10 dollar </h3>
</li>
That should do it.
Although you might need to change the class names
This should also work (if you can't change the html):
console.log(x[0].innerHTML);
https://www.w3schools.com/jsref/dom_obj_htmlcollection.asp
I'm creating an application in jsp & servlet. So I have created a home.jsp page it is a main page of an application and it contains a menu bar . When user clicks on menu item the following page should appear in my iframe and if user clicks on another menu item the selected page should appear in the same iframe.
I need a help.... The following code is creating a menu bar and menu item
<li>Master
<ul>
<li>Customer</li>
<li>Suplier</li>
<li>Item</li>
</ul>
</li>
<li>Transaction
<ul>
<li>Purchase</li>
<li>Sales</li>
</ul>
</li>
<li>Contact</li>
After menu bar I have a iframe in which I want to show a menu item.
I don't know how do i do this. please help me out
You will need to bind a function onclick of your <a> tag. Then using jQuery find the href of the <a> which is clicked, finally assign that href as src of your iframe
HTML
<li>Master
<ul>
<li>Customer</li>
<li>Suplier</li>
<li>Item</li>
</ul>
</li>
<li>Transaction
<ul>
<li>Purchase</li>
<li>Sales</li>
</ul>
</li>
<li>Contact</li>
<br />
<iframe src="" height="300" width="500"></iframe>
jQuery
$(document).ready(function () {
$('a').click(function () {
var target = $(this).attr('href');
$('iframe').attr('src', target);
return false;
});
});
Here's a working DEMO. I just changed the href of first two items as example.