I would like to know how to access a parent element when it doesn't have any identifier. Typically I want to do the following:
<td>
<a title="mySweetTitle"/>
</td>
Access the "td" using his "a" child to modify his properties.
you should use parentElement property https://developer.mozilla.org/en/docs/Web/API/Node/parentElement
example:
document.getElementById('your_id').parentElement
in your case you can use
document.getElementsByTagName('a')[0].parentElement
Maybe this could help you:
$("a").bind("click" , function(){
var parent = $(this).parent();
});
what you are looking for ist $(this).parent() look at my example
i hope it helps
$(document).ready(function() {
$('.test').on('click', function() {
$(this).parent().append("<button>test2</button>");
});
});
<!doctype HTML>
<html>
<head>
<title>Test Umgebung</title>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div>
<button class="test">test</button>
</div>
</body>
</html>
Related
i have make many search in getting current element
in jQuery :$(this)
but in Angular J S 1.x i haven't found it here what i have do angular.element(this) but it's not correct
here is my code i like to get current target element
<html>
<head>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<div ng-app="" ng-controller="eventController">
<h2>AngularJS $event example</h2>
<input type="text" ng-change="handleChange($event)" ng-model="test" value="My Text" class="testtt" >
</div>
<script>
function eventController($scope) {
$scope.handleChange = function(event) {
var classname = event.target.currentTarget.className
console.log(classname);
}
}
</script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
I think you should look into ng-class for what you are trying to do. If you really need direct access to an element, use a directive. The directives link function gets the element at initialisation time.
i have found the solution to my problem by using javascript
document.activeElement
This code should work fine, but i don't know where it is getting stuck!
This code is very simple, and it should work, I think the problem is the 3rd parameter that is passed ("mouseup", function(){}, false)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>html demo</title>
</head>
<body>
<a id="navlink" href="http://google.com">Click me</a>
<div id="Reveal">Not Clicked</div>
<script>
document.getElementById('navlink').addEventListener("mouseup" , function(e){
e.preventDefault();
document.getElementById('reveal').innerHTML("Clicked");
},false);
</script>
</body>
</html>
You have a problem with the innerHTML and the id of the div Reveal
document.getElementById('navlink').addEventListener("mouseup" , function(e){
e.preventDefault();
document.getElementById('Reveal').innerHTML = "Clicked";
},false);
Regards.
Please try adding click event instead of mouseup.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>html demo</title>
</head>
<body>
<a id="navlink" href="http://google.com">Click me</a>
<div id="Reveal">Not Clicked</div>
<script>
document.getElementById('navlink').addEventListener("click" , function(e){
e.preventDefault();
//document.getElementById('reveal').innerHTML("Clicked");
},false);
</script>
</body>
</html>
Try this,
document.getElementById('reveal').innerHTML = "Clicked";
Because innerHTML is property not a function.
Also you have a typo in your code, 'Reveal' is the id of DIV.
You need the following corrections, please see the snippet below
1) .innerHtml is not a method, its a property so you must use =
2) getElementById are case sensitive so document.getElementById('reveal') must be document.getElementById('Reveal')
document.getElementById('navlink').addEventListener("mouseup" , function(e){
e.preventDefault();
document.getElementById('Reveal').innerHTML = "Clicked";
},false);
<a id="navlink" href="http://google.com">Click me</a>
<div id="Reveal">Not Clicked</div>
Reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors
innerHTML is a property, not a mutator method. The syntax are as follows:
Return the innerHTML property:
HTMLElementObject.innerHTML
Set the innerHTML property:
HTMLElementObject.innerHTML=text
In your case, it should be: document.getElementById('reveal').innerHTML = "Clicked";
Also, the last parameter for the addEventListener is optional. It is a Boolean value that specifies whether the event should be executed in the capturing or in the bubbling phase.
e.preventDefault does not prevent either mouseup or mousedown. Check this answer. You must use click() or addEventListener("click", to use preventDefault.
Example:
document.getElementById('navlink').addEventListener("click" , function(e){
And in your code you made a mistake of using innerHTML as a function and reveal has a capital R, so the corrected form is
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>html demo</title>
</head>
<body>
<a id="navlink" href="http://google.com">Click me</a>
<div id="Reveal">Not Clicked</div>
<script>
document.getElementById('navlink').addEventListener("click" , function(e){
e.preventDefault();
document.getElementById('Reveal').innerHTML = "Clicked";
},false);
</script>
</body>
</html>
In the following code, how can I move the <div class="move">I was moved to the parent.</div> after the parent of the element I click, when I click Add New.
I have everything right, but I cannot do the part where I need to move it after() the parent.
Can you please help?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Side bar poll thingy</title>
<script type="text/javascript" src="http://localhost/site/scripts/jQueryCore.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.add').click(function() {
$("#container").find('.flag, .edit, .delete').remove();
$(this).parent("div").after(".move");
});
});
</script>
</head>
<body>
<div id="container">
<div class="h1" data-id="1">Teachers <span class="add" data-id="US01">Add New</span></div>
<div class="h2" data-id="2">Who is your favorite Math teacher? <span class="add" data-id="US02">Add New</span></div>
<br>
<div class="h1" data-id="8">Restaurants <span class="add" data-id="US10">Add New</span></div>
<div class="h2" data-id="9">Which is your favourtie restaurant in town? <span class="add" data-id="US20">Add New</span></div>
<div class="move">I was moved to the parent.</div>
</div>
</body>
</html>
.after() doesn't accept selectors, currently you are inserting .move string after the selected element. You can use .insertAfter() method instead:
$(".move").insertAfter(this.parentNode);
http://jsfiddle.net/RYzpG/
try this fiddle http://jsfiddle.net/QP3MZ/
$(document).ready(function () {
$('.add').click(function () {
$("#container").find('.flag, .edit, .delete').remove();
var $move = $('#container .move');
$(this).parent("div").after($move);
});
});
This code should work.
$(document).ready(function() {
$('.add').click(function(e) {
e.preventDefault();
$("#container").find('.flag, .edit, .delete').remove();
$('.move').insertAfter($(this).parent());
//Or (Note we have to pass a jQuery element inside after, if we pass string then it will copy the string instead)
//$(this).parent('div').after($('.move'));
});
});
Also here is a jsfiddle. The reason why yours wasn't working is you are passing a string inside the .after, which jQuery would treat as an HTML string. You had to pass a jQuery element or DOM element. See it here.
I've created a div adiv how would I make this div a child of bdiv using Javascript?
Assuming adiv is created in Javascript and bdiv is created declaratively on the page:
document.getElementById("bdiv").appendChild(adiv);
Here is the sample code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
function appendDiv()
{
var div1=document.getElementById('div1');//get the div element
var div2=document.createElement("div");//create a new div
div2.innerHTML="div2";
div1.appendChild(div2);// append to div
}
</script>
</head>
<body onload=appendDiv()>
<div id="div1">
div1
</div>
</body>
</html>
assuming you've got your bdiv and adiv references to HTMLElements:
bdiv.appendChild(adiv);
adds adiv to bdiv as a last children.
see a complete example :
http://jsfiddle.net/XFMUp/
You can use the appendChild function as follows:
<div id="diva">a</div>
<div id="divb">b</div>
The use the following javaScript to move the div having removed it.
var diva = document.getElementById("diva");
var divb = document.getElementById("divb");
diva.appendChild(divb);
Check out this example on jsFiddle
It might be a simple, but the funny thing is i've tried it for almost 2-3hrs and haven't been able to solve it :(.
I have a parent window, which has a text box, and it has a value. I do a window.open and open a client and try to read the value of the parent, but unable to get the value.
Any help!!
I've tried
window.parent.document.getElementById(window.name)
window.parent.document.getElementById('test').value
window.opener.document.getElementById('teast').value
window.parent.opener.document.getElementById('teast').value
window.opener.parent.document.getElementById('teast').value
Almost all the permutation and combination. And its pure HTML.
Due to security restrictions, Javascript is unable to access documents that reside on a separate domain from the current one. So, if your parent is on a different domain from the child, this will never work.
window.opener.document.getElementById('test').value should work.
I've tried that, it ain't work. I'm posting the code
test.html
<html>
<head>
<title>Chat</title>
</head>
<body>
<div id="chatMessages"></div>
<script>
var newWin = null;
var OpenWindow = null;
function popUp(strURL, strType, strHeight, strWidth) {
if (newWin != null && !newWin.closed)
newWin.close();
var strOptions="";
if (strType=="console")
strOptions="resizable,height="+
strHeight+",width="+strWidth;
if (strType=="fixed")
strOptions="status,height="+
strHeight+",width="+strWidth;
if (strType=="elastic")
strOptions="toolbar,menubar,scrollbars,"+
"resizable,location,height="+
strHeight+",width="+strWidth;
alert(window.parent.document.getElementById(window.name));
newWin = window.open(strURL, 'alertWindow', strOptions);
//newWin.document.getElementById("child").value='Str';
newWin.focus();
// send_data(data);
}
function chat() {
popUp('../alert.jsp','console',250,600);
}
</script>
<form name="AlertReceiverOnHeader" onclick="chat()">
<input type="text" value="teast" id="teast" name="teast"/>
</form>
</html>
child.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Alert</title>
</head>
<body onload="load()">
<script language="JavaScript">
function load() {
alert('In load');
alert("001="+window.parent.document.getElementById('teast'));
alert("002="+window.parent.document.getElementById(window.name));
alert("003="+window.opener.document.getElementById('teast').value);
}
</script>
<form name="child">
<input type="text" id="child" value="child"/>
</form>
</body>
</html>