I want to change the text inside span. But span doesn't have a class and parent div doesn't have an id. I can't change the html it is not in my hand. So how can I change text of span with js?
<div class="mobilMenuAcButton">
<span>MENU</span>
<i class="fal fa-bars"></i>
</div>
Something like this
let div = document.querySelector(".mobilMenuAcButton");
let span = div.querySelector("span");
span.innerHTML = "NEW MENU";
<div class="mobilMenuAcButton">
<span>MENU</span>
<i class="fal fa-bars"></i>
</div>
Try using this for setting the text:
node.textContent = yourText
and this to return the value:
node.textContent
MDN Referance
let span = document.querySelector(".mobilMenuAcButton span");
span.textContent = "test";
<div class="mobilMenuAcButton">
<span>MENU</span>
<i class="fal fa-bars"></i>
</div>
Here is an example by using jQuery.
//This can update the content of sample span
$(".mobilMenuAcButton span").html('New Menu');
//If you have multiple span in different level
//better use '>' or first() to specific select the target
//'>' standard for first level of children inside parent
//Both line below can do the works
$(".mobilMenuAcButton > span").html('New Menu');
$(".mobilMenuAcButton span").first().html('New Menu');
<!-- Insert the following line to head tag to use jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mobilMenuAcButton">
<span>MENU</span>
<i class="fal fa-bars"></i>
</div>
If you want to change multiple elements you can use querySelectorAll. Afterwards just loop over each element and change its content.
const menuSpans = document.querySelectorAll('.mobilMenuAcButton span, .mobilMenuBT span');
for(const span of menuSpans) {
span.textContent = 'MENÜ';
}
<div class="mobilMenuAcButton">
<span>MENU</span>
<i class="fal fa-bars"></i>
</div>
<div class="mobilMenuBT">
<span>MENU</span>
<i class="fal fa-bars"></i>
</div>
Related
I need to display the title value of the image (class name: media_image) in another p tag (class name: media_folder_title) for every row. But I can't able to get the value. I have attached the sample code here.
Screenshot:
HTML Code:
<div id="media-folder">
<div class="media_folder">
<i class="fa fa-folder-open"></i>
<img src="/img/artist/default.jpg" alt="5382" title="Test" class="media_image">
<p class="media_folder_title"></p>
</div>
<div class="media_folder">
<i class="fa fa-folder-open"></i>
<img src="/img/artist/default.jpg" alt="5383" title="test1" class="media_image">
<p class="media_folder_title"></p>
</div>
<div class="media_folder">
<i class="fa fa-folder-open"></i>
<img src="/img/artist/default.jpg" alt="5118" title="Uploads" class="media_image">
<p class="media_folder_title"></p>
</div>
</div>
jQuery Code:
$(".media_folder img.media_image").each(function(){
var imgtitle = $(this).attr("title");
console.log(imgtitle);
setTimeout(function(){
console.log("settimout ok");
$(this).append("<p>"+imgtitle+"</p>");
}, 3000);
});
The problem is with the $(this) in the timeout because it's no longer the image but the window.
Also, append aims to append an element inside another element. It's not possible appending an element inside an image.
As your snippet implies, you want to append the p tag after the image, after is the right function for that.
$(".media_folder img.media_image").each(function() {
const $img = $(this);
const imgtitle = $img.attr("title");
setTimeout(function() {
$img.after("<p>" + imgtitle + "</p>");
}, 3000);
});
<div id="media-folder">
<div class="media_folder">
<i class="fa fa-folder-open"></i>
<img src="/img/artist/default.jpg" alt="5382" title="Test" class="media_image">
<p class="media_folder_title"></p>
</div>
<div class="media_folder">
<i class="fa fa-folder-open"></i>
<img src="/img/artist/default.jpg" alt="5383" title="test1" class="media_image">
<p class="media_folder_title"></p>
</div>
<div class="media_folder">
<i class="fa fa-folder-open"></i>
<img src="/img/artist/default.jpg" alt="5118" title="Uploads" class="media_image">
<p class="media_folder_title"></p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
Change the selectors in the first line into:
.media_folder img .media_image
Sometimes space is important.
Your problem is that you are trying to append something inside an img tag, which is not possible - as with a few other html elements.
What you are looking for is $.after()
Try $(this).after($('<p />').text(imgtitle))
I making a shopping cart website. I need to set up a delete button per product and I want to call the same delete function with this every time. Can you help me understand what I did wrong? excuse me for not using proper terminology as I am new to coding.
This is my function to delete products:
function myFunction(element){
var element = document.getElementById("remove");
element.parentElement.parentElement.remove();
}
///
this is a snippet of my code for a product row.
<div class="row product">
<div class="buttons">
<i class="fas fa-heart" onclick="myHeart(this)"></i>
<i class="fas fa-times" id="remove" onclick="myFunction(this.element)"></i>
</div>
</div>
I need the specific product row to be deleted every time I click on the delete icon.
Change the ID to a class, so it can be reused
<div class="row product">
<div class="buttons">
<i class="fas fa-heart"></i>
<i class="fas fa-times remove"></i>
</div>
</div>
Add event handlers for those elements
var elems = document.querySelectorAll('.remove');
for (i = 0; i < elems.length; ++i) {
elems[i].addEventListener('click', function() {
this.closest('.product').remove();
});
}
You need to put this as parameter, not this.element:
<div class="row product">
<div class="buttons">
<i class="fas fa-heart" onclick="myHeart(this)"></i>
<i class="fas fa-times" id="remove" onclick="myFunction(this)"></i>
</div>
</div>
and for your function myFunction(). You don't need to search for element using document.geElementById() because you already have it as a parameter. Here is an update of your function:
function myFunction(element){
element.parentElement.parentElement.remove();
}
Close button which remove the elements from DOM, work only on the second click.
Here is HTML part of button: That is closeBtn.
function removeHeader() {
var list = document.getElementById("main");
list.removeChild(list.childNodes[0]);
}
<div id="main">
<div class="nanoSaturnBanner">
<p>teteasdasdasdsadasds sad asdasdasdasdasdas</p>
<div class="banner-buttons">
<label class="showme">Ads by Google</label>
<a class="infoLink" href="https://support.google.com/adsense/#topic=3373519" target="_blank">
<i class="fas fa-info-circle"></i>
</a>
<div class="closeBtn" onclick="removeHeader()">
closeBtn
</div>
</div>
</div>
</div>
You should use list.childNodes[1] because the list.childNodes[0] represent the #text node that is the whitespaces after <div id="main">. So, in first click it was removing that node and in second click it was removing the actual node with <div class="nanoSaturnBanner">
function removeHeader() {
var list = document.getElementById("main");
list.removeChild(list.childNodes[1]);
}
<div id="main">
<div class="nanoSaturnBanner">
<p>teteasdasdasdsadasds sad asdasdasdasdasdas</p>
<div class="banner-buttons">
<label class="showme">Ads by Google</label>
<a class="infoLink" href="https://support.google.com/adsense/#topic=3373519" target="_blank">
<i class="fas fa-info-circle"></i>
</a>
<div class="closeBtn" onclick="removeHeader()">
<i class="far fa-window-close">close</i>
</div>
</div>
</div>
Note: Whitespace inside elements is considered as text, and text is considered as nodes. Comments are also considered as nodes.
As childNodes get none element nodes as well, like text and comment, use e.g. children instead to get the first actual element.
Note, with that you also make sure getting the element no matter how many "none element nodes" their might be in your markup.
Stack snippet
function removeHeader() {
var list = document.getElementById("main");
list.removeChild(list.children[0]);
}
<div id="main">
<div class="nanoSaturnBanner">
<p>teteasdasdasdsadasds sad asdasdasdasdasdas</p>
<div class="banner-buttons">
<label class="showme">Ads by Google</label>
<a class="infoLink" href="https://support.google.com/adsense/#topic=3373519" target="_blank">
<i class="fas fa-info-circle"></i>
</a>
<div class="closeBtn" onclick="removeHeader()">
<i class="far fa-window-close">close</i>
</div>
</div>
</div>
function removeHeader() {
var list = document.getElementById("main");
list.remove(list.childNodes[0]); // replacing removeChild with remove worked
}
Check the fiddle.
I am trying to select a nested HTML element with jQuery.
<div id="myTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">
<div class="events_box">
<div class="event_left">
<div class="event_left-item">
<div class="icon_2">
<i class="fa fa-clock-o" id="programHoursId0"></i>
</div>
<div class="icon_2">
<i class="fa fa-location-arrow" id="programLocationId0"></i>
</div>
I have to select the classes fa fa-clock-o and fa fa-location-arrow. I am able to select them by ID but I want select them by class.
I already have tried combinations like:
$('div div div .fa fa-clock-o').css('visibility', 'hidden');
And:
$('.event_left .event_left-item .icon_2 .fa fa-clock-o').css('visibility', 'hidden');
And:
$('div.fa fa-clock-o').css('visibility', 'hidden');
Along with many more....
The goal is to hide those FontAwesome icons.
Since fa and fa-clock-o are classes on the same element you must not have space between them in the selector or jQuery (or any alternative like querySelector) will think one is a descendant of the other. Try this:
$('.fa.fa-clock-o')
// ^^^
div.fa fa-clock-o: look for any descendant of type fa-clock-o (tag) of a div that has the class fa => nothing selected because there is no tag fa-clock-o.
div.fa .fa-clock-o: look for any elements with the class fa-clock-o that are descendants of a div with the class fa => will match what you want.
.fa.fa-clock-o: look for elements that have the classes fa and fa-clock-o => matches what you want too
Please try this $('.fa').hide();
Here when I am clicking on More Info. I want an alert showing the value present inside h3 tags. How can I do that ??
Here is the html i am working on
<div class="col-lg-4 col-xs-6">
<div class="small-box bg-red">
<div class="inner">
<h3>Text 1</h3>
<p>fhjh</p>
</div>
More info <i class="fa fa-arrow-circle-right"></i>
</div>
</div>
so what you want is to click on the small-box-footer link and alert the 'Text 1'?
$(document).ready(function(){
$('.small-box-footer').on('click', function(evt){
//if you don't want the default event
evt.preventDefault();
//show the alert text
alert($('.inner h3').text());
})
})
you can try code below
$(document).ready(function(){
$('.small-box-footer').on('click', function(e){
e.preventDefault();
alert($(this).parents('.small-box').find('h3').text());
})
})
Working Demo
you can try :
$('.small-box-footer').click(function(e){
var text = $(this).prev().children().first().text();
console.log(text);
});
you need to have an event listener for the onclick event when someone clicks on the "more info".
you'll then need to get the closest query the dom (you can traverse upwards or alternatively go from the DOM straight to a specific element... it's cheaper to go up).
example...
Using Jquery
$('.small-box-footer').click(function(ev) {
ev.preventDefault();
// find the h3
var text = $('.inner h3').text();
alert(text);
});
Simple as just grabbing the h3 directly, skip traversing:
window.showTitle = function() {
alert($('h3').text())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-4 col-xs-6">
<div class="small-box bg-red">
<div class="inner">
<h3>Text 1</h3
<p>fhjh</p>
</div>
<a href="#" class="small-box-footer" onclick="showTitle()">More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>