<html>
<head>
</head>
<body>
<div id="content_Data"></div>
<script type="text/javascript">
function auto()
{
alert("auto called");
document.getElementById('content_Data').innerHTML='<div><table><tr><td>10</td><td>20</td></tr></table></div>';
alert(document.getElementById('content_Data').innerHTML);
getelements();
}
function getelements(){
var searchElement=document.getElementById('content_Data').getElementsByTagName("div");
for( var i=0; i<searchElement.length; i++ )
{
var child_length=searchElement[i].childNodes.length;
for( j=0; j<child_length; j++ )
{
alert(searchElement[i].childNodes[j].nodeValue);
}
}
}
</script>
<script>auto();</script>
</body>
</html>
try looking at innerHTML of td node. Or if you want only text, then it is innerText for IE and textContent for others.
alert(searchElement[i].childNodes[j].innerHTML)
also, jQuery will greatly simplify your code.
Well, just navigate there. For example
document.getElementById('content_Data').firstChild.firstChild.firstChild
gets you the first table cell (with value 10).
You can change the getElementsByTagName("div") to get the td elements:
var searchElement=document.getElementById('content_Data').getElementsByTagName("td");
And, it's better to declare the j variable on the second for :D. That's all you need to change
Related
I'm trying to write a simple script which will change the text of a number of anchors on a page. I'm quite new to Javascript and I'm able to change the anchors but it changes the whole tag including removing the href.
How do I edit just the text only without affecting the href?
<body>
<div class="loop-add-to-cart">
Add to basket
<div class="wpd-buttons-wrap-simple" data-id="11544">
Design from blank
</div>
</div>
<script>
function buybuttons() {
var buybuttons = document.getElementsByClassName('wpd-buttons-wrap-simple');
for(var i = 0; i < buybuttons.length; i++){
buybuttons[i].innerHTML="Test";
};
}
buybuttons();
</script>
</body>
You can use a query selector to get all a tags inside an element with a class of wpd-buttons-wrap-simple:
document.querySelectorAll('.wpd-buttons-wrap-simple a');
You can then set the textContent or innerHTML of the link.
<body>
<div class="loop-add-to-cart">
Add to basket
<div class="wpd-buttons-wrap-simple" data-id="11544">
Design from blank
</div>
</div>
<script>
function buybuttons() {
var buybuttons = document.querySelectorAll('.wpd-buttons-wrap-simple a');
for(var i = 0; i < buybuttons.length; i++){
buybuttons[i].textContent = "Test";
};
}
buybuttons();
</script>
</body>
Using 'querySelectorAll' you can get the element the class and the element inside as below:
document.querySelectorAll('.wpd-buttons-wrap-simple > a')
function buybuttons() {
var buybuttons = document.querySelectorAll('.wpd-buttons-wrap-simple a');
for(var i = 0; i < buybuttons.length; i++){
buybuttons[i].innerHTML="Test";
};
}
buybuttons();
You are currently overwriting the innerHTML of the div element, but you are looking for the anchor element inside of the div.
Use document.querySelectorAll to get all of them, or document.querySelector to only get the first.
by internal style I mean
<style>
#div
{color:red;}
</style>
document.getElementsByTagName('style').innerHTML is not working... document.styleSheets either.
document.getElementsByTagName returns Array of Elements
so you need to access it with index
document.getElementsByTagName('style')[0].innerHTML
document.styleSheets is much useful if you want to get specific selector or modify something from style sheet
Example
var styleSheet = document.styleSheets[1];
// assuming second one is embedded style,
// since document.styleSheets also shows linked style sheets (like <link heref=".. >)
for (var i = 0; i < styleSheet.rules.length; i++) {
// if you are looking for selector '.main'
if (styleSheet.rules[i].selectorText === '.main') {
// get background color
var oldBg = styleSheet.rules[i].style.backgroundColor;
// set background color
styleSheet.rules[i].style.backgroundColor = '#ddd';
}
}
document.styleSheets is an array , for each of the style definition in your page .
Iterate for each of the style elements and find the rules defined.
document.styleSheets[0].rules
This is again an array. so iterate . The rule text for each of the rules can be extracted as follows
document.styleSheets[indexofstyleelement].rules[indexofrule].cssText
document.styleSheets[0].rules[0].cssText gives rule text for first of the rules defined inside first style element
<!DOCTYPE html>
<html>
<head>
<style>
#div {
color: red;
}
</style>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementsByTagName("STYLE")[1];
document.getElementById("demo").innerHTML = x.innerHTML;
}
</script>
</body>
</html>
https://jsfiddle.net/mediaguru/xt9mkncx/
using jquery use this
var x = $('style').html();
using javascript
var x=document.getElementById("home");
var y = x.firstChild.innerHTML;
Ahh I'm so stupid..
for (var i = 0; i < styles_length; i++)
{// I had:
// styles.innerHTML;
// not correct:
styles[i].innerHTML;
}
All answers by #Jag, #ABHIJITH GM, #mediaguru, #hardik are correct.
Thank you guys! And sorry for this newbie question... all day codding, my eyes are hurting, coffee time.
Without using jquery, how to I turn off any future links? as my ajax result returned html which contain tags.
In the AJAX callback function, you can run this code which will remove the href attribute from the links:
var links = document.getElementsByTagName("a");
for (var i=0; i<links.length; i++) {
links[i].removeAttribute("href");
}
Demo: http://jsfiddle.net/Lzjkf2uv/1/
you can use providing ID for ajax loaded content
getElementsByTagName
WORKING CODE :
<html>
<head>
<script>
window.onload=function(){/*
//removes attribute
suggested by : Duncan Cowan
var anchors = document.getElementById("myAjaxResult");
anchors = anchors.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
anchors[i].removeAttribute("href");
}*/
//NOTE: Prevents default actions (has default anchor's css)
var anchors = document.getElementById("myAjaxResult").getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
anchors[i].addEventListener("click",
function(event){
event.preventDefault();
}
);
}
}
</script>
</head>
<body>
<div id="myAjaxResult">
Test 2
Test 2
<a></a>
<a></a>
</div>
</body>
</html>
Note:
call the anchor remove function on ajax SUCCESS
Are you considering using CSS for that?
If yes, here it is:
.disabled {
pointer-events: none;
}
I have a list of texts and I want to change their innerHTML. how can I do that by javascript if I have thousands of li tag (whose data come from database)?
<div>
<ul>
<li>a</li>
<li>as</li>
<li>asd</li>
<li>asds</li>
<li>asdsa</li>
<li>asdsad</li>
<li>asdsadz</li>
<li>asdsadzc</li>
....
.....
</ul>
</div>
-Thanks.
Update
JS code being used:
function a(){
var parent = document.getElementById("z");
var i = 0;
for(i = 0; i <= parent.children.length; i++){
if(parent.children[i].tagName == "LI"){
if(i%2!=0){
parent.children[i].innerHTML="ok";
}
}
}
}
document.onload=a(); // this didn't work. so I called the function in body tag instead of that.
<body onload="a();">
Have you tried using getElementsByTagName ? Sonds like it would help you find the elements you're trying to work with.
Edit
If you can give an Id to the UL element that holds the li's you're trying to process, you could do something like this:
var parent = document.getElementById("yourID");
var i = 0;
for(i = 0; i < parent.children.length; i++){
if(parent.children[i].tagName == "LI") {
//do what you want...
}
}
EDit 2
You have to change the last line on your script:
document.onload=a();
With this one: window.onload=a;
That'll get your function to execute on the onLoad event. Note that there might be some crossbrowser incompatibility, I would suggest researching a bit on how to execute functions on the onload event on a crossbrowser manner, or just adding this to your body tag:
<body onload="a();">
Given the - not so far fetched - precondition you wish to use jQuery, you can select them and iterate over them with "each".
$("li").each(
function() { $(this).html("changed content"); }
);
If you are not using jQuery, using a js-library that helps you out with the quircky dom is probably not a bad idea...
The general idea
Select nodes
Iterate and change html
is always the same.
I have the following HTML page:
<html>
<head>
<script type="text/javascript" src="JavaScript/Menu.js"></script>
</head>
<body>
<ul>
<li><a onclick="GetIndex(this)">One</a></li>
<li><a onclick="GetIndex(this)">Two</a></li>
<li><a onclick="GetIndex(this)">Three</a></li>
<li><a onclick="GetIndex(this)">Four</a></li>
</ul>
</body>
</html>
And the Menu.js javascript:
function GetIndex(sender)
{
var aElements = sender.parentNode.parentNode.getElementsByTagName("a");
var aElementsLength = aElements.length;
var index;
for (var i = 0; i < aElementsLength; i++)
{
if (aElements[i] == sender) //this condition is never true
{
index = i;
return index;
}
}
}
Why is the commented condition never met? How do I compare if the two HTML elements are equal in Javascript? Thanks for all the help.
"Your code is correct"
Old Post, but here is a quick function to do this:
function nodeIndex(el) {
var i=0;
while(el.previousElementSibling ) {
el=el.previousElementSibling;
i++;
}
return i;
}
This should work with an element reference as the parameter. It basically just returns the number of previous siblings.
try to use:
if (aElements[i] === sender)
instead of
if (aElements[i] == sender)
Are you sure GetIndex function gets executed on click event on anchor tag?
Try by giving href attribute to anchor tag. You can write either
One
or
One
here is the working example http://jsfiddle.net/QfRSb/
Jquery can help using prevAll()
$(document).on("click","li",function(){
var index=$(this).prevAll();
alert(index);
});
The modern way to find index of element
[...el.parentNode.children].indexOf(el)