This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 2 years ago.
I am trying to change the text of h1 via using following code
document.getElementById("wpbody-content").getElementsByClassName("wrap").getElementsByTagName('h1')[0].innerHTML = 'Application Forms';
Here is the HTML code
<div id="wpbody-content">
<div class="wrap">
<h1>Text</h1>
</div>
<div class="clear"></div></div>
But it shows me following error
TypeError: document.getElementById(...).getElementsByClassName(...).getElementsByTagName is not a function
the getElementsByClassName() method returns an array of elements. You need to refer to the first wrap element in the array, just like you are correctly doing for the h1 elements.:
document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].getElementsByTagName('h1')[0].innerHTML = 'Application Forms';
Replace getElementsByClassName("wrap") by getElementsByClassName("wrap")[0]
document.getElementById("wpbody-content")
.getElementsByClassName("wrap")[0]
.getElementsByTagName('h1')[0].innerHTML = 'Application Forms';
<div id="wpbody-content">
<div class="wrap">
<h1>Text</h1>
</div>
<div class="clear"></div>
</div>
You can also use getElementsByTagName:
document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].getElementsByTagName('h1')[0].innerHTML = 'Application Forms';
<div id="wpbody-content">
<div class="wrap">
<h1>Text</h1>
</div>
<div class="clear"></div>
</div>
try jQuery as
$('#wpbody-content .wrap h1').text('Application Forms');
Related
This question already has answers here:
RegEx match open tags except XHTML self-contained tags
(35 answers)
Closed 3 years ago.
I have to match every element that has an attribute 'class'='row' in order to use it as separator in javascript .split() method. How can I archive this with regular expressions? In the following string <div class="row" tabindex="0"> should be matched.
<div class="row" tabindex="0"><div class="cell">rect</div><div class="cell">A</div><div class="cell">0</div><div class="cell">0</div><div class="cell">10</div><div class="cell">10</div></div><div class="row" tabindex="0"><div class="cell">rect</div></div>
Just use jQuery and save yourself the headache.
let html = $(` <div class="row" tabindex="0">
<div class="cell">rect</div>
<div class="cell">A</div>
<div class="cell">0</div>
<div class="cell">0</div>
<div class="cell">10</div>
<div class="cell">10</div>
</div>
<div class="row" tabindex="0">
<div class="cell">rect</div>
</div>`);
let rows = html.filter('.row');
Then if you need the raw HTML string of a specific row:
let row1HTML = rows[0].innerHTML;
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 4 years ago.
I am new in javascript and I am trying to change the opacity of a div and I don't know how to do it, and I didn't find anything online.
here is my code so far:
Javascript
function close_images(){
document.getElementsByClassName("modificar_imagen").style.opacity="0";
}
HTML
<div class="modificar_imagen">
<div class="close1" onclick="close_images()"><img src="img/icons/close.png" alt="close"></div>
<div class="contenido">
<div class="grid">
<div class="image_user"><img src="img/user1.jpg"></div>
<div class="image_user"><img src="img/user1.jpg"></div>
</div>
</div>
</div>
document.getElementsByClassName("modificar_imagen") retrieves a HTMLCollection. It would be better to use document.querySelectorAll() so that you can use the forEach() method to iterate over the image collection:
document.querySelectorAll(".modificar_imagen").forEach(el=>el.style.opacity="0");
That should do it.
function close_images(){
document.querySelectorAll(".modificar_imagen").forEach(el=>el.style.opacity="0");
}
close_images()
<div class="modificar_imagen">
<div class="close1" onclick="close_images()"><img src="img/icons/close.png" alt="close"></div>
<div class="contenido">
<div class="grid">
<div class="image_user"><img src="img/user1.jpg"></div>
<div class="image_user"><img src="img/user1.jpg"></div>
</div>
</div>
</div>
This question already has answers here:
How to select last child element in jQuery?
(6 answers)
Closed 5 years ago.
<div class="group-box">
<p>test1</p>
<div class="group-box">
<p>test2</p>
<div class="group-box">
<p>test3</p>
</div>
</div>
</div>
i want to get last $('.group-box')
how to find this?
use this
var last = $(".group-box:last");
you will get the last child
and checkout these answers
How to select last child element in jQuery?
select deepest child in jQuery
alert($('.group-box:last').text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="group-box">
<p>test1</p>
<div class="group-box">
<p>test2</p>
<div class="group-box">
<p>test3</p>
</div>
</div>
</div>
$( ".group-box:last-child" )
selector for last child/element
This question already has answers here:
Select elements by attribute
(17 answers)
Closed 6 years ago.
i have a situation in my page i don't have any clue other than this 2 clue to target
<div itemscope>
some <html>
........
</div>
how can i target div having itemscope i,e <div itemscope>
suppose i have structure like this
<div itemscope>
<a hrfe="http://www.a.com">a.com</a>
</div>
<div itemscope type="tang">
<a hrfe="http://www.b.com">b.com</a>
</div>
<div>
<a hrfe="http://www.c.com">c.com</a>
</div>
<div>
<a hrfe="http://www.d.com">d.com</a>
</div>
PLEASE SUGGEST ME WHAT THIS KIND OF SELECTOR IS CALLED SO THAT I CAN SEARCH IT ON STACKOVERFLOW
var allDivWith_itemscope = $('div[i don"t know what else]');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div itemscope>
<a hrfe="http://www.a.com">a.com</a>
</div>
<div itemscope type="tang">
<a hrfe="http://www.b.com">b.com</a>
</div>
<div>
<a hrfe="http://www.c.com">c.com</a>
</div>
<div>
<a hrfe="http://www.d.com">d.com</a>
</div>
Well there are two things i want to mention:
You have a typo with href attribute.
You should use data-* prefix for custom attributes.
So, on basis of these you can change to this:
<div data-itemscope>
Now in js/jquery/css you can do this:
// css
div[data-itemscope]{
properties:values;
}
// javascript
document.querySelector('div[data-itemscope]')
//jquery
$('div[data-itemscope]')
This question already has answers here:
How do you select in-line text with Jquery?
(3 answers)
Closed 7 years ago.
I am trying to change the text of h1 tag but not other inner html. Here is my code
document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].getElementsByTagName('h1')[0].innerHTML = 'Candidate Application Forms';
HTML code
<div id="wpbody-content">
<div class="wrap">
<h1>All Forms <a class="title-action" href="">Add New</a></h1>
</div>
</div>
I need to change only <h1>All Forms</h1> text not other inside the tag.
I need to do it without jQuery
Insert an extra span like this:
<div id="wpbody-content">
<div class="wrap">
<h1><span id="allForms">All Forms</span> <a class="title-action" href="">Add New</a></h1>
</div>
</div>
then manipulate it with:
document.getElementById('allForms').innerHTML = 'Candidate Application Forms';
Put All Forms in span with id like
<span id="spanId">All Forms </span>
now change content of span with id
If you want this without changing HTML:
But the best way is probably to wrap All Forms into an element, and change it.
var elt = document.getElementById("wpbody-content")
.getElementsByClassName("wrap")[0].getElementsByTagName('h1')[0];
elt.innerHTML = 'Candidate Application Forms ' + elt.children[0].outerHTML;
<div id="wpbody-content">
<div class="wrap">
<h1>All Forms <a class="title-action" href="">Add New</a></h1>
</div>
</div>
tl;dr jsFiddle
Every chunk of text is actually a TextNode. You can imagine your HTML like this:
<h1>
<text data="All Forms" />
<a class="title-action" href="">
<text data="Add New" />
</a>
</h1>
You can access those elements using HTMLElement.childNodes property:
var children = elm.childNodes;
for(var i=0,l=children.length; i<l; i++) {
if(children[i] instanceof Text)
return children[i];
}
HTMLElement.children is a list without Text nodes.
All you need is to add an id to your element and you can change it as you want.
document.getElementById("change").innerHTML="it is changed";
<div id="wpbody-content">
<div class="wrap">
<h1 id="change">All Forms <a class="title-action" href="">Add New</a></h1>
</div>
</div>
It depends on the HTML in the wrap-html tag, you could use javascript replace function on the innerHTML String, with an easy regular Expression like /<h1>[^<]*/.
/<h1>[^<]*/ matches "<h1>...until next less-then-sign (<)"
here is an example:
var newHeader = 'Candidate Application Forms'
var htmlValue = document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].innerHTML;
document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].innerHTML =
htmlValue.replace(/<h1>[^<]*/,"<h1>" + newHeader);
// Tested with Win7 on Chrome 46+
<div id="wpbody-content">
<div class="wrap">
<h1>All Forms <a class="title-action" href="">Add New</a></h1>
</div>
</div>
If you do not want to change your document's current structure, I suggest you to change only the first child of the H1 node:
var h1=document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].getElementsByTagName('h1')[0];
h1.firstChild.nodeValue='Candidate Application Forms';