How to select the inside of jQuery variable - javascript

I have some HTML in a jQuery object:
var $div = $(`
<div class="myDiv">
<p class="name"></p>
<p class="data"></p>
</div>`);
I want to change the content of the <p> elements, so I tried like this but in vain:
// Attempt #1
$div.".name".html("name here");
// Attempt #2
$div."> P".html("name here");
How can I use a selector to get the inside of jQuery variable?

Just as you would do when the elements are in the DOM, you need to use find() to retrieve elements within the object. Try this:
var $div = $(`<div class="myDiv">
<p class="name"></p>
<p class="data"></p>
</div>`);
$div.find('p').text('name here');
$div.appendTo('body');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Related

JQuery unable to find ID assigned to a newly appended HTML string

I have a HTML string, I've assigned the div with the class parent an id of myid (in the HTML string). I then append this HTML string to an element with id main. Using the browsers inspect tool I can see that the id has been infact assigned, but for some reason JQuery doesn't know about the newly assigned id.
var html = `
<div class="parent">
<div id="content" >
</div>
<div>`
var newHtml = $(html);
newHtml.find('.parent').attr('id','myid');
$('#main').append(newHtml);
console.log($('.parent').attr('id')); // Logged as undefined.
The method $.fn.find() targets the descendant elements where as $.fn.filter() target the element at same level. As per your HTML .parent is at top level, hence you need to use $.fn.filter() while setting the ID of DIV element.
var html = `<div class="parent">
<div id="content" >
</div>
<div>`
var newHtml = $(html);
newHtml.filter('.parent').attr('id','myid');
$('#main').append(newHtml);
console.log($('.parent').attr('id'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="main"></div>
OR, You don't need to use $.fn.find() at all. Just directly use .attr()
var html = `<div class="parent">
<div id="content" >
</div>
<div>`
var newHtml = $(html);
newHtml.attr('id','myid');
$('#main').append(newHtml);
console.log($('.parent').attr('id'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="main"></div>
You should use find method in combination with andSelf() method.
andSelf() method add the previous set of elements on the stack to the current set.
Read more here.
var html = `<div class="parent">
<div id="content" >
</div>
<div>`;
var newHtml = $(html);
newHtml.find('.parent').andSelf().attr('id','myid');
$('#main').append(newHtml);
console.log($('.parent').attr('id'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="main"></div>

How to remove the content from a "div" element using a button "onclick" function?

I have a div element that contains a number of images. When the user clicks a button, I want the contents of the div to be removed (not the div itself, I want to reuse the div to potentially add new content).
In my HTML, the div and button are defined as:
<body>
...
<div class="MyDiv"></div>
...
<button id="removeDiv" onclick="removeDivFunction()">remove Div Function</button>
...
</body>
How do I write a function that removes all elements from this div?
You have to call removeChild:
function removeDivFunction() {
MyDiv.parentNode.removeChild(MyDiv);
}
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>Remove div element</button>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
David has already pointed you to an existing question/solution.
For reference consider reading: http://www.w3schools.com/js/js_htmldom_nodes.asp
Its always a good idea to assign id to the div.
Also if you are using jQuery you can delete element by $("#divid").remove() for reference see: https://api.jquery.com/remove/
I hope this helps.
function removeDivFunction() {
$(".MyDiv").remove();
}
<div class="MyDiv">I need to remove</div>
<button id="removeDiv" onclick="removeDivFunction()">remove Div Function</button>
function removeDivFunction() {
var element = document.getElementsByClassName("MyDiv")[0];
element.parentNode.removeChild(element);
}
DEMO
You can try
Html
<div id="some">Example</div>
<button onclick="myFunction()">Click me</button>
javascript
function myFunction() {
var child = document.getElementById("some");
child.parentNode.removeChild(child);
}
And if you want to erase content of DIV then use
child.innerHTML = "";

Create element in another div element using classname

I'm trying to create new elements in another pre-existing <div> element using js DOM.
I'm able to do this if that <div> is called using id but I want to accomplish this by class
This is what I have so far
<html>
<body>
<button onclick="whiskey()">go</button>
<div class="pagination-pagination-right">
<!-- I want to spawn new Elements here !-->
</div>
<div class="controlElement">
<p> This is just a control Element</p>
</div>
<script type="text/javascript">
function whiskey(){
var input=document.createElement("input");
input.type="text";a
input.id="sad";
var newdiv=document.createElement("div");
newdiv.appendChild(input);
/* this part doesn't work */
var maindiv=document.getElementsByClassName("pagination-pagination-right");
maindiv.appendChild(newdiv);
}
</script>
</body>
</html>
getElementsByClassName() returns a HTMLCollection which is an array like collection of object, which does not have the appendChild() method. You need to get the first element form the list using an index based lookup then call the appendChild()
function whiskey() {
var input = document.createElement("input");
input.type = "text";
//ID of an element must be unique
input.id = "sad";
var newdiv = document.createElement("div");
newdiv.appendChild(input);
var maindiv = document.getElementsByClassName("pagination-pagination-right");
maindiv[0].appendChild(newdiv);
}
<button onclick="whiskey()">go</button>
<div class="pagination-pagination-right">
<!-- I want to spawn new Elements here !-->
</div>
<div class="controlElement">
<p>This is just a control Element</p>
</div>
You could also do this by using jQuery
HTML
<button>go</button>
<div class="pagination-pagination-right">
<!-- I want to spawn new Elements here !-->
</div>
<div class="controlElement">
<p> This is just a control Element</p>
</div>
jQuery
$(function(){
$('button').click(function(){
$('<div>A</div>').appendTo('.pagination-pagination-right');
});
});
You can replace $('<div>A</div>') part with whatever element you want to append in your <div>
Fiddle here

jQuery take specific div's text

I have a menu where I'd like to retrieve the text within the div so I tried writing something like this
$(".link").click(function() {
var linkValue = $(".link").text();
alert(linkValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
<div class="link">Home</div>
<div class="link">Apartment</div>
<div class="link">Contact</div>
<div class="link">About us</div>
</div>
But it takes all the values of each class. Is it possible to make it take only the div's text I clicked?
Use this inside the click function:
$(".link").click(function(){
var linkValue = $(this).text();
alert(linkValue);
});

How to target image inside a div with an id with getelementbyid/tag/name?

Basically I want to change smiley.gif to landscape.jpg without changing divs and tags, but this code is not working.
Any suggestions?
<div id="foo">
<div id="bar"><img src="smiley.gif">
Hello world!
</div>
</div>
<script>
getElementById("bar").getElementsByTagName("img").src="landscape.jpg";
</script>
getElementById is a method that you can only call on the document. getElementsByTagName will return a nodelist, and you need the first element in that nodelist:
document.getElementById("bar").getElementsByTagName("img")[0].src="landscape.jpg";
// Note the `[0]` here -----------------------------------^^^
JSFiddle
it will be better if you assign ID to img tag and use it like this
<div id="foo">
<div id="bar"><img src="smiley.gif" id="myImg"> Hello world! </div>
</div>
<script>
document.getElementById("myImg").src="landscape.jpg";
</script>
jsfiddle1
or Use this
<div id="foo">
<div id="bar"><img src="smiley.gif"> Hello world! </div>
</div>
<script>
var obj = document.getElementById("foo");
if(obj != null)
{
var images = obj.getElementsByTagName('img');
images[0].src = 'landscape.jpg';
}
</script>
As you have confirmed that the layout is fixed, then simply use.
document.getElementById('bar').firstElementChild.src = 'landscape.jpg';
This basically finds the unique element named bar, chooses the first child element (not firstChild, which could be an empty text node) and assigns the new value to src
Documentation on MDN
getElementById
firstElementChild

Categories

Resources